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