So, we now have an ASP.NET MVC web application which is hosting a simple Hello Angular World App. and in limiting the project size and complexity it should serve as a useful “starter template”. When looking at the project, you will notice two distinct naming conventions, initially I thought this was ugly, however it has proven a useful reminder of which environment or language we are dealing with e.g. TypeScript/JavaScript or C#.
Now we have an Angular 2 app running in our Local IIS (or IIS Express if you decided to skip that section), let’s build a very simple MVC app to host our Angular 2 app.
Add a Controller
Expand the Angular.World project
Right-click Controller…
Click Add > Controller
Select MVC 5 Controller – Empty
Click Add
Enter HomeController for the Controller name
Click Add
Add a Layout
Expand the Angular.World project
Right-click Views
Click Add > New Folder
Rename the folder Shared
Right-click Shared
Click Add > MVC 5 Layout Page (Razor)
Enter _Layout for the Item name
Click OK
Change the code to match:
Note: At this point you may notice that the @Styles is underlined in red, this is because the project is missing a reference, which we will address soon.
Save and close
Add the _ViewStart View
Expand the Angular.World project
Right-click Views
Click Add > MVC 5 View Page with Layout (Razor)
Enter _ViewStart for the Item name
Click OK
Note: The “\Views\_ViewStart.cshtml” file defines the common or default layout that all the application’s views will use. It is however possible to set a different layout by setting the Layout property, or setting it to null to not use a layout at all.
Add the Index View
Expand the Angular.World > Views project
Right-click Home
Click Add > MVC 5 View Page with Layout (Razor)
Enter Index for the Item name
Click OK
Double-click Index.cshtml
Copy and paste the following code:
Click Save and close
Install Microsoft.AspNet.Web.Optimization using NuGet
Tip: You can monitor the installation process using Visual Studio’s Output window
Update Web.config Files
Now that the project references System.Web.Optimization, we need to update the two Web.config file.
Root Web.config
Locate the config file located at the root of Hello.Angular.World project
Open the config file
Locate the configuration/runtime/assemblyBinding section
Add the following code
Note: …/runtime/assemblyBinding represents the path to a specific XML node…
Views Web.config
Locate the config file located within the Views folder
Open the config file
Locate the configuration/system.web.webPages.razor/pages/namespaces section
Add the following code
Note: …/pages/namespaces represents the path to a specific XML node…
_Layout.cshtml Review Code
Locate Views > Shared > _Layout.cshtml
Double-click cshtml to open
Locate the @Styles tag
The @Styles tag should no longer have a red underliner
Add the BundleConfig Class
Within the Angular.World project
Right-click App_Start
Click Add > Class…
Select Class
Enter cs
Click Add
Open cs
Replace the existing code with the following:
Save and close
Update the Global.asax
At this point we have written the code required to implement Bundling, however the web application doesn’t know about it, so let’s register it.
Within the Angular.World project
Double-click asax to open
Locate the Application_Start() method
Add the following code
One final thing: systemjs.config.js
Remember the “ASP.NET MVC: prefix / to specify the root” comment and that I said we would revisit systemjs.config.js file?
In the root of Angular.World project
Double-click config.js to open
Locate ‘npm:’: ‘node_modules/’ and change to: ‘npm:’: ‘/node_modules/’
Locate app: ‘app’, and change to: app: ‘/app’,
Save and close
TO-DO: I’m sure with a little effort we could write a Routing module to take care of this dynamically…
Test the Hello Angular World app
Select Angular.World and right-click
Click Properties or Alt+Enter
Click on Web
Set the Start Action to Current Page
Press Ctrl+S
Click Debug > Start Debugging or press F5 key
Visual Studio should build your project and open the default view in a Web Browser in debug mode. It is normal for IIS to take some time to load the web application, the first time it is run (i.e. either after an IIS reset, Web config change or an application build) …
We are sending a request to http://localhost:12345 which should load the default MVC View which in turn should load the Hello Angular World app:
Next try sending a request to http://localhost:12345/Home which should also load the default MVC View which in turn should load the Hello Angular World app:
And finally try sending a request to http://localhost:12345/Home/Index which should also load the default MVC View which in turn should load the Hello Angular World app:
My preference it to develop web applications using my Local IIS server opposed to the IIS Express server that ships with Visual Studio. I have several reasons for this, two of which are:
You have more control over how your application is served, for instance domain names and port numbers
You can test your web applications even if Visual Studio is not running
Now that the basic configuration is complete let’s create the Hello Angular World app. The table below lists the folders and files that we will add next.
Name
Type
Used
assets
Folder
Images etc. used by the Angular application
shared
Folder
Components shared across the Angular application
app.component.css
file
The main CSS file for the Angular application
app.component.ts
File
The main display template for the Angular application
app.module.ts
File
Imports the components and modules used by the Angular application
main.ts
File
The Angular application’s entry point
Add Folders & Files
Expand the Hello.Angular.World project and right-click on app
Click Add > New Folder for the following:
Assets
shared
Click Add > StyleSheet for the following:
app.component.css
Note: When a file name includes an extra full-stop, then you need to include the file extension as part of the name.
Click Add > TypeScript File for the following:
app.component.ts
app.module.ts
main.ts
Note: If you see the following alert, click No
Add Code to the App Files
Open app.component.css and add the following code:
Open app.component.ts and add the following code:
Open app.module.ts and add the following code:
Open main.ts and add the following code:
Update Test HTML File
Expand the Hello.Angular.World project
Double on the _index.html file to edit
Locate the following line of code: //System.import(‘app’).catch(function(err){ console.error(err); });
Uncomment the code by removing the prefixed //
Test the Hello Angular World app
Select Angular.World project and right-click
Click Set as Start Up Project
Select _index.html file and right-click
Click Set as Start Up Page
Click Debug > Start Debugging or press F5 key
Visual Studio should build your project and open the selected Web Browser. The _index.html may take time to load the first time and should look something like this:
Note: In my IIS Express example the URL is http://localhost:15426/_index.html, however your website maybe hosted on a different port number.
Now to add the basic folder and files structure required to build a simple Angular App. My intentions are to remain true to the conventions set out by Angular while remaining sympathetic to ASP.NET MVC. The items in grey were included automatically during the projects creation, the items in black we have already added and the items in red we are about to add.
Name
Type
Used
Origin
Added
app
Folder
Container for the Angular App files
Angular
Manually
App_Data
Folder
Included during the project creation
ASP.NET MVC
VS Template
App_Start
Folder
Included during the project creation
ASP.NET MVC
VS Template
Content
Folder
CSS files and related image files
ASP.NET MVC
Manually
=> site.css
File
Add to the Content folder
General
Manually
Controllers
Folder
Included during the project creation
ASP.NET MVC
VS Template
Images
Folder
Included during the project creation
ASP.NET MVC
VS Template
Models
Folder
Included during the project creation
ASP.NET MVC
VS Template
Scripts
Folder
JavaScript files
General
Manually
Views
Folder
Included during the project creation
ASP.NET MVC
VS Template
_index.html
File
HTML test page for Angular
General
Manually
Favicon.ico
File
Favourite or shortcut icon/images
General
VS Template
Global.asax
File
ASP.NET application file
ASP.NET MVC
VS Template
package.json
File
NPM package configuration
Quick Package Installer
NPM
Packages.config
File
NuGet package configuration file
ASP.NET MVC
VS Template
systemjs.config.js
File
Angular App configuration file
Angular
Manually
tsconfig.json
File
TypeScript configuration file
TypeScript
Manually
Web.config
File
Web application configuration file
ASP.NET MVC
VS Template
Added Default Folders
Select Hello.Angular.World and right-click
Click Add > New Folder
Give or rename the folder to match one of the following and repeat until the list is complete:
You may notice two comments containing “ASP.NET MVC: prefix / to specify the root”. This is to remind us to add the “/” prefix when we start working with MVC files.
Added Test HTML File
In readiness to test our Hello Angular World app, lets add an HTML file.
Select Hello.Angular.World and right-click
Click Add > HTML Page
Set the Item name: _index.html
Click OK
The default HTML code will look like this:
Update the code so that it looks like this:
Notice that the “System.import(‘app’).catch(function(err){ console.error(err); });” has been commented out, we will return to this section of code later.
Add Site.css file
Before I forget, let’s add a style sheet called Sites.css
Within the Hello.Angular.World project, right-click Content
Now that we have a basic ASP.NET MVC 5 project let’s install some NPM Packages. Once you have installed the first NPM Package you will see a new file, called package.json, added to your Project’s root. We will look at the package.json in more details later.
Install TypeScript 2 Package
To give you an idea of how to install NPM Package, let’s use the TypeScript 2 NPM Package as an example you can follow for all the other packages.
Select npm, enter typescript and select latest version (in this case 2.1.4)
Click Install
Tip: You can monitor the installation process using Visual Studio’s Output window
Note: TypeScript is a language for application-scale JavaScript. TypeScript adds optional types, classes, and modules to JavaScript. TypeScript supports tools for large-scale JavaScript applications for any browser, for any host, on any OS. TypeScript compiles to clean, readable, standards-based JavaScript. Try it out at http://www.typescriptlang.org/playground.
Edit the ‘package.json’ File
Now that you have installed a NPM Package locate the package.json file at the root of the Hello.Angular.World project.
Open the package.json file in Visual Studio (text editor) and review the content
Change the value for “name“, from “myproject” to “hello-angular-world“
Add “description”: “Hello Angular World (from Visual Studio and Local IIS) is a start-up project in which two worlds collide… “
Add “license”: “MIT”
Add “repository”: {} or add your Git details…
Add “scripts”: {} and leave it empty for now
Add “dependencies”: {} and leave it empty for now
Move “devDependencies” : { “typescript”: “^2.1.4” } to the end (this is just a personal preference not requirement)
Before we continue with the process of adding PMN Packages I would like to point out that the Quick Install Package tool seems to always add the package reference to the devDependencies section. I am assuming this is in order to avoid adding unnecessary packages to test harnesses or transpilers the production app. You can read more here: https://docs.npmjs.com/files/package.json
Add “dependencies” Packages
The following packages should be added to the dependencies section, however as I mentioned earlier they are added to the devDependencies section and so we need to manually update the package.json file once we have finished importing the list.
Warning: The Quick Install Package’s Latest Version drop-down-list is not sorted numerically (the data is as string values and not number).
Tip: You can monitor the installation process using Visual Studio’s Output window
Open the package.json file in Visual Studio (text editor)
Review the contents, however there shouldn’t be any further actions to complete
Close the file
Restore NPM Packages
Just as we sometime need to restoring NuGet packages, we also need to restore NPM packages too.
Navigate to root of the Angular.World project
Right-click package.json
Click Restore Packages
Tip: You can monitor the installation process using Visual Studio’s Output window
Once the restoration process is complete, then the Hello.Angular.World project should contain a hidden folder called node_modules, see the image above for details.
Update the “scripts” Property (package.json)
This section can contain a list of script commands that automate life cycle processes for your package. For more information: https://docs.npmjs.com/misc/scripts
Navigate to the root of the Angular.World project
Open the package.json file in Visual Studio (text editor)
Add the following properties/commands:
Save and close the file
‘tsconfig.json’ file
Now that we have our NPM packaged loaded, lets configure the TypeScript configuration file. The tsconfig.json file instructs the compiler on how to generate JavaScript files.
Hello Angular World (from Visual Studio and Local IIS)
I have written this article and the accompanying Visual Studio 2015 project as an exploration of how Angular 2 and ASP.NET MVC 5 can coexist and I have tried to remain true to both frameworks, respecting naming conventions and file structure. While carrying out research for this article, I came across the Angular2Mvc5Application Project Template which did tick most of the boxes, however I wanted to know more about the inner workings, structure and naming conventions.
As you will see I have covered a lot of detail, so you may decide to download the source code to dip in and out as you need, or to read the article from end to end. Either way, the complete source code and project files can be found on GitHub: https://github.com/sionjlewis/Hello.Angular.World
Note: You may notice references to My.iTunes within the code, this is because I extracted this code from another solution with the sole purpose of keeping the example as simple as possible.
Turn on the Internet Information Services Windows Feature.
This action is only required if you plan to develop against your Local IIS server, opposed to IIS Express which ships with Visual Studio.
Configure Visual Studio to use the global external web tools, and not the tools that ship with Visual Studio:
Open Visual Studio 2015 and click: Tools > Options
Navigate to: select Projects and Solutions > External Web Tools
Add the nodejs Program Files directory at the top of the Locations of external tools list. In my case this path is C:\Program Files\nodejs Note: Visual Studio will now look first for external tools in the current workspace, if not found it will then look in the global path and if it is not found there, Visual Studio will use its own versions of the tools.
From: https://angular.io/docs/ts/latest/cookbook/visual-studio-2015.html#!#prereq1
Locate the short cut or favourite that you use to open Visual Studio
Right-click and click Properties
Click Shortcut > Advanced…
Tick the Run as administer checkbox
Click OK
Note: You may run into difficulties debugging without Run as administer, however depending on your UAC settings you are likely to see a User Access Control promote every time you open Visual Studio. Click Yes to continue to open Visual Studio.
Restart Visual Studio
Note: It is probably a good idea to restart your machine after the next section
NPM Task Runner & Package Installer
Install the following Visual Studio Extensions (if not already installed):
Note: I couldn’t find the Task Runner Explorer window at first, however after restarting my machine and some mucking around I found here: View > Other Windows > Task Runner Explorer (Ctrl+Alt+Bkspace)
Create a Visual Studio Project
At this point I am assuming you have completed the prerequisites and have Visual Studio 2015 open and ready to create a new project (and solution).
Select: File > Add > New Project…
Select: Visual C# > Web > ASP.NET Web Application (.NET Framework)
Note: At the time of writing this I had .NET Framework 4.6.1 installed
Following my first post in this series, in which I set up Visual Studio Code, installed Git and cloned Deborah Kurta’s Angular2-GettingStarted.git. Today I’m going list the steps required to install and configure the NPM (Node Package Manager) command line utility; this will enable me to see the results of my code changes in a web browser as I make them.
Before we start you should have already installed:
These are some different options for setting up an Angular 2 Application, however as I’m following Deborah’s course I have chosen to use her start files:
Having previously cloned a Git repository we need to run the “npm install” command to install all of the required libraries (e.g. Angular and TypeScript) into our Application:
Open VS Code (Visual Studio Code)
Open the your Angular 2 project (in my case this project is called APM)
Right click on a file in the root of the folder and click Open in Terminal
Enter the following command:
Mac:GitHub sion$ npm install
If output ends in an error, try the command again as it will often complete successfully on the second attempt.
Running the Angular 2 Application: Macintosh (OS X)
These steps are to be repeated every time I start up our machine and want to work with my Angular 2 project. The “npm start” commands starts the “lite-server” (file server), runs the TSC (TypeScript Compiler) in watch mode and opens a browser window loading the Angular 2 Application.
Open VS Code (Visual Studio Code)
Open your Angular 2 project (in my case this project is called APM)
Right click on a file in the root of the folder and click Open in Terminal
These are my notes, made while watching Deborah Kurta’s Angular2: Getting Started course, hosted by Pluralsight. Most, if not all, of this information can be found within Deborah’s course, however by stripping this information out I hope to jog memories…
Once complete, open the folder with Visual Studio Code.
Commit changes:
From Visual Studio Code select Push
If VS Code does not prompt for login and password, open the Terminal in the context of the code:
a. Select Explorer
b. Right click on a file in the root of the folder and click Open in Terminal
c. Enter the following command:
Mac:GitHub sion$ git push
d. Enter the Username and Password for your GitHub account
e. Wait for the command to complete before restarting VS Code
f. VS Code should now be able to Push without errors
g. Optional: install a credential helper https://help.github.com/articles/caching-your-github-password-in-git/
You must be logged in to post a comment.