Hello Angular World (from Visual Studio and Local IIS)

Pages: 1, 2, 3, 4, 5, 6, 7

Conclusion

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#.

References & Useful Links

Hello.Angular.World
https://github.com/sionjlewis/Hello.Angular.World

Angular2Mvc5Application Visual Studio 2015 Template
https://marketplace.visualstudio.com/items?itemName=Payns75.Angular2Mvc5sampleapplication

Angular 2: Visual Studio 2015 Quickstart
https://angular.io/docs/ts/latest/cookbook/visual-studio-2015.html#!#prereq1

Node.js Downloads
https://nodejs.org/en/download/

Visual Studio 2015 Update 3
https://www.visualstudio.com/en-us/news/releasenotes/vs2015-update3-vs

TypeScript 2.0 is now available for Visual Studio https://blogs.msdn.microsoft.com/typescript/2016/09/22/announcing-typescript-2-0/

Download and install TypeScript 2.0 for Visual Studio 2015
http://download.microsoft.com/download/6/D/8/6D8381B0-03C1-4BD2-AE65-30FF0A4C62DA/TS2.0.3-TS-release20-nightly-20160921.1/TypeScript_Dev14Full.exe

TypeScript 2.0 is now available for Visual Studio https://blogs.msdn.microsoft.com/typescript/2016/09/22/announcing-typescript-2-0/

NPM Task Runner
https://marketplace.visualstudio.com/items?itemName=MadsKristensen.NPMTaskRunner

Visual Studio: Package Installer
https://marketplace.visualstudio.com/items?itemName=MadsKristensen.PackageInstaller

Task runners in Visual Studio 2015
https://blogs.msdn.microsoft.com/webdev/2016/01/06/task-runners-in-visual-studio-2015/

TypeScript Playground
http://www.typescriptlang.org/play

Specifics of npm’s package.json handling
https://docs.npmjs.com/files/package.json

How npm handles the “scripts” field
https://docs.npmjs.com/misc/scripts

TypeScript Configuration
https://angular.io/docs/ts/latest/guide/typescript-configuration.html

Angular 2 QuickStart / systemjs.config.js
https://github.com/angular/quickstart/blob/master/systemjs.config.js

ASP.NET MVC: Bundling and Minification
https://www.asp.net/mvc/overview/performance/bundling-and-minification

Pages: 1, 2, 3, 4, 5, 6, 7

Hello Angular World (from Visual Studio and Local IIS)

Pages: 1, 2, 3, 4, 5, 6, 7

Hello Angular World from a MVCV View

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

1. Expand the Angular.World project
2. Right-click Controller…
3. Click Add > Controller
4. Select MVC 5 Controller – Empty
5. Click Add
6. Enter HomeController for the Controller name
7. Click Add

Add a Layout

1. Expand the Angular.World project
2. Right-click Views
3. Click Add > New Folder
4. Rename the folder Shared
5. Right-click Shared
6. Click Add > MVC 5 Layout Page (Razor)
7. Enter _Layout for the Item name
8. Click OK
9. 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.

10. Save and close

Add the _ViewStart View

1. Expand the Angular.World project
2. Right-click Views
3. Click Add > MVC 5 View Page with Layout (Razor)
4. Enter _ViewStart for the Item name
5. 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

1. Expand the Angular.World > Views project
2. Right-click Home
3. Click Add > MVC 5 View Page with Layout (Razor)
4. Enter Index for the Item name
5. Click OK
6. Double-click Index.cshtml
7. Copy and paste the following code:

8. Click Save and close

Install Microsoft.AspNet.Web.Optimization using NuGet

https://docs.microsoft.com/en-us/aspnet/mvc/overview/performance/bundling-and-minification

1. Select Angular.World and right-click
2. Click Manage NuGet Packages… or Alt+Enter
3. Click on Browse
4. Enter AspNet.Web.Optimization in the Search box
5. Select AspNet.Web.Optimization
6. Click Install
7. Click OK in Preview dialogue box
8. Click I Accept in License Accept dialogue box

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

1. Locate the config file located at the root of Hello.Angular.World project
2. Open the config file
3. Locate the configuration/runtime/assemblyBinding section
4. Add the following code

Note: …/runtime/assemblyBinding represents the path to a specific XML node…

Views Web.config

1. Locate the config file located within the Views folder
2. Open the config file
3. Locate the configuration/system.web.webPages.razor/pages/namespaces section
4. Add the following code

Note: …/pages/namespaces represents the path to a specific XML node…

_Layout.cshtml Review Code

1. Locate Views > Shared > _Layout.cshtml
2. Double-click cshtml to open
3. Locate the @Styles tag
4. The @Styles tag should no longer have a red underliner

Add the BundleConfig Class

1. Within the Angular.World project
2. Right-click App_Start
3. Click Add > Class…
4. Select Class
5. Enter cs
6. Click Add
7. Open cs
8. Replace the existing code with the following:

9. 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.

1. Within the Angular.World project
2. Double-click asax to open
3. Locate the Application_Start() method
4. 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?

1. In the root of Angular.World project
2. Double-click config.js to open
3. Locate ‘npm:’: ‘node_modules/’ and change to: ‘npm:’: ‘/node_modules/’
4. Locate app: ‘app’, and change to: app: ‘/app’,
5. 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

1. Select Angular.World and right-click
2. Click Properties or Alt+Enter
3. Click on Web
4. Set the Start Action to Current Page
5. Press Ctrl+S
6. 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:

Pages: 1, 2, 3, 4, 5, 6, 7

Hello Angular World (from Visual Studio and Local IIS)

Pages: 1, 2, 3, 4, 5, 6, 7

Hosting with Local IIS

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

Hosting node.js applications in IIS on Windows

1. Prerequisites
   • URL Rewrite (from Microsoft)
     https://www.iis.net/downloads/microsoft/url-rewrite
   • js (should already be installed)
     https://nodejs.org/en/download/
2. Install “iisnode”
   • Download iisnode from tjanczuk/iisnode GitHub
   • https://github.com/tjanczuk/iisnode
   • Once installed, navigate to: C:\Program Files\iisnode (for x64 version)
   • Open a Command Prompt window using Run as Administrator
   • Optional: To set up the sample node app:
     1. Right-click setupsamples.bat and click Run as Administrator
     2. Follow the instructions if required…
     3. Once installed open a browser and navigate to: http://localhost/node

3. Restart IIS
   • Open a Command Prompt window using Run as Administrator
   • Type iisreset /noforce and press Enter

C:\Windows\system32>iisreset /noforce

Attempting stop...
Internet services successfully stopped
Attempting start...
Internet services successfully restarted

C:\Windows\system32>

Add an IIS Application (Website)

You will need to have already turned on Internet Information Services as a Windows Feature.

1. Open Internet Information Services (IIS)
2. Expend your local server node
3. Right-click on the Sites folder
4. Click Add Website…
5. Enter the following:
   • Site name: Angular.World
   • Physical path: (navigate to the Hello.Angular.World project folder)
   • Port: 12345
6. Click OK

Config Visual Studio Web Application

1. Select Angular.World and right-click
2. Click Properties or Alt+Enter
3. Click on Web
4. Change the Servers type to Local IIS
5. Change the Project Url, for example: http://localhost:12345
6. Press Ctrl+S

Restore “package.json”

1. Open/expand the Angular.World
2. Right-click json
3. Click Restore Packages

Note: You can use Visual Studio’s Output window to monitor the progress of the packages being restored.

Test Your Local IIS Application

1. Open your favourite browser (e.g. Chrome)
2. Enter the full path to the _index.hml page, for example: http://localhost:12345/_index.html

Note: If the Application fails, then open the Developer tools (for Chrome press F12) and review the output in the Console window

Pages: 1, 2, 3, 4, 5, 6, 7

Hello Angular World (from Visual Studio and Local IIS)

Pages: 1, 2, 3, 4, 5, 6, 7

Hello Angular World from a HTML page

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

1. Expand the Hello.Angular.World project and right-click on app
2. Click Add > New Folder for the following:
   • Assets
   • shared
3. 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.

1. 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

1. Open app.component.css and add the following code:

2. Open app.component.ts and add the following code:

3. Open app.module.ts and add the following code:

4. Open main.ts and add the following code:

Update Test HTML File

1. Expand the Hello.Angular.World project
2. Double on the _index.html file to edit
3. Locate the following line of code:
   //System.import(‘app’).catch(function(err){ console.error(err); });
4. Uncomment the code by removing the prefixed //

Test the Hello Angular World app

1. Select Angular.World project and right-click
2. Click Set as Start Up Project
3. Select _index.html file and right-click
4. Click Set as Start Up Page
5. 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.

Pages: 1, 2, 3, 4, 5, 6, 7

Hello Angular World (from Visual Studio and Local IIS)

Pages: 1, 2, 3, 4, 5, 6, 7

Angular Folder & File Structure

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

1. Select Hello.Angular.World and right-click
2. Click Add > New Folder
3. Give or rename the folder to match one of the following and repeat until the list is complete:
   • app
   • Content
   • Images
   • Scripts

Added “systemjs.config.js” Files

The information below is based directly upon the Angular 2 QuickStart / systemjs.config.js file
https://github.com/angular/quickstart/blob/master/systemjs.config.js

1. Select Angular.World and right-click
2. Click Add > JavaScript File
3. Set the Item name: systemjs.config.js
4. Click OK

The JavaScript code will look like this:

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.

1. Select Hello.Angular.World and right-click
2. Click Add > HTML Page
3. Set the Item name: _index.html
4. 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

1. Within the Hello.Angular.World project, right-click Content
2. Click Add > Style Sheet
3. Set the item name css
4. Click OK
5. Copy and paste the following code:

6. Click Save and close

Pages: 1, 2, 3, 4, 5, 6, 7

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

The following topics are covered:

• Prerequisites
• NPM Task Runner & Package Installer
• Create a Visual Studio Project
• NPM Packages
  • Install TypeScript 2 Package
  • Edit the ‘package.json’ File
  • Add “dependencies” Packages
  • Add “devDependencies” Packages
• Restore NPM Packages
• Update the “scripts” Property (package.json)
• ‘tsconfig.json’ file
• Angular Folder & File Structure
• Hello Angular World from a HTML page
  • Add Folders & Files
  • Add Code to the App Files
  • Update Test HTML File
  • Test the Hello Angular World app
• Hosting with Local IIS
  • Hosting node.js applications in IIS on Windows
  • Add an IIS Application (Website)
• Config Visual Studio Web Application
  • Restore “package.json”
  • Test Your Local IIS Application
• Hello Angular World from a MVCV View
  • Add a Controller
  • Add a Layout
  • Add the _ViewStart View
  • Add the Index View
  • Install AspNet.Web.Optimization using NuGet
  • Update Web.config Files
  • Add the BundleConfig Class
  • Update the Global.asax
  • One final thing: systemjs.config.js
  • Test the Hello Angular World app
• Conclusion
• References & Useful Links

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.

Prerequisites

Before we begin, please make sure that you have ticked off the following prerequisites. The following list builds upon the Visual Studio 2015 Quickstart article published on the Angular website: https://angular.io/docs/ts/latest/cookbook/visual-studio-2015.html#!#prereq1

1. 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.
2. Download and install Node.js (and NPM) https://nodejs.org/en/download/
3. Confirm that you have Visual Studio 2015 Update 3 installed:
   • Open Visual Studio 2015 and click Help > About Visual Studio
   • If Update 3 is not installed, then download and install: https://www.visualstudio.com/en-us/news/releasenotes/vs2015-update3-vs
4. 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

5. Install TypeScript 2 for Visual Studio 2015:
   • Either: Download and install TypeScript 2.0 for Visual Studio 2015
   • Or: Open the Node.js Command Prompt and enter: npm install -g typescript@2.0

Note: TypeScript 2.0 is now available for Visual Studio https://blogs.msdn.microsoft.com/typescript/2016/09/22/announcing-typescript-2-0/

6. Set Visual Studio 2015 to Run as Administrator
   • 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.

7. 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):

1. NPM Task Runner
   https://marketplace.visualstudio.com/items?itemName=MadsKristensen.NPMTaskRunner
2. Package Installer
   https://marketplace.visualstudio.com/items?itemName=MadsKristensen.PackageInstaller
3. Restart your machine

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).

1. Select: File > Add > New Project…
2. 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

1. Enter:
   • Name: Hello.Angular.World
   • Location: <select location>
   • Solution name: Hello.Angular.World
   • Tick Create directory for solution
2. Click OK
3. Select a template Empty and tick MVC
   
   
4. Click OK

Your project should look something like this:

Pages: 1, 2, 3, 4, 5, 6, 7