AngularWebAppTemplate

This is web project configured for working with angular 4.0 RELEASE and Microsoft Visual Studio 2015

Short instruction how to run angular 4 with MS Visual Studio 2015

Content

Check list
Installing Angular from scratch
Problems and solutions
IIS settings for SPA application

Check list

Manually restore NuGet packages for the project.
Install NPM Task Runner. This will allow you to run tasks described in package.json
Check npm version for Studio. Using NPM Task Runner execute "getNpmVersion" command from package.json If it is higher then 3.X.X - all is ok. If not - see "NPM version lower than 3"chapter from readme.html.
Check Node.JS version for Studio. Using NPM Task Runner execute "getNodeVersion" command from package.json If it is higher then 5.X.X - all is ok. If not - see "Node.JS version lower than 5" chapter from readme.html.
IMPORTANT: Run !install command from the task runner. For unknown reason taskrunner does not see angular files from VS so you should use this command.
If all is ok - run application and have fun. If smth wrong happened - go to the Troubleshooting" chapter.
If you still have problems - try to install all from null.

Installing Angular 4.0 Release version for MS Visual Studio 2015 from null.

Install NPM Task Runner and Package Installer.
Create new empty web project.

Add package.json file to the solution root with next content

{
    "name": "myproject",
    "version": "1.0.0",
    "devDependencies": {
        },
    "scripts": {
        "updateNpm": "npm install npm@latest"
    }
}

Run "updateNpm" command from your taskrunner. Even if you have last npm - do this. This is important. If you have already installed Node.js before skip this step. If not - go the Node.js and install latest version of node.js. Inside Visual studio, go the Tools -> Options -> Projects and Solutions -> External web tools and set a path to the propper node.js version. Do not forget to move your new path up the hill.

Update your package json with dependencies, angular 2 needed. (With little overhead for the old browswers)

{ "name": "myproject", "repository": "https://github.com/Drag13/MvcWithAngular2", "license": "MIT", "version": "1.5.0", "devDependencies": { "typescript": "2.2.2", "typings": "2.1.1" },

"dependencies": { "@angular/common": "~4.0.0", "@angular/compiler": "~4.0.0", "@angular/core": "~4.0.0", "@angular/forms": "~4.0.0", "@angular/http": "~4.0.0", "@angular/platform-browser": "~4.0.0", "@angular/platform-browser-dynamic": "~4.0.0", "@angular/router": "~4.0.0",

"angular-in-memory-web-api": "~0.3.0",
"systemjs": "0.19.40",
"core-js": "^2.4.1",
"rxjs": "5.0.1",
"zone.js": "^0.8.4"

"scripts": { "postinstall": "typings install", "typings": "typings", "cmd": "npm typescript", "getNpmVersion": "npm -v", "getNodeVersion": "node -v", "updateNpm": "npm install npm@latest", "!install": "npm install" } }

Run install command from the Task runner.
Create app folder in the root of your solution. Add app.components.ts to the app folder.
Configure typescript for Visual studio. Close your project and open .csproj file in the text editor. Find PropertyGroup section and add two additional options:
```
<TypeScriptExperimentalDecorators>true</TypeScriptExperimentalDecorators>
<TypeScriptEmitDecoratorMetadata>true</TypeScriptEmitDecoratorMetadata>
```
Save changes and open solution.
Open your project properties and go to the TypeScript setting. Pick CommonJS as module system.

Update app.component.ts with this code.

import { Component } from '@angular/core';
@Component({
    selector: 'my-app',
    template: 'My First Angular App'
})
export class AppComponent { }

Add main.ts to the app folder.

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';
const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);

Add app.module.ts near the main.ts with the following code

import { NgModule }      from '@angular/core';
     import { BrowserModule } from '@angular/platform-browser';
     import { AppComponent }   from './app.component';
    @NgModule({
        imports: [BrowserModule],
        declarations: [AppComponent],
        bootstrap: [AppComponent]
})
export class AppModule { }

Add index.html to the root of your project. Code for index.html could be found inside the repository.

Add systemjs.config.js to the root with next code.

/**
 * System configuration for Angular 2 samples
 * Adjust as necessary for your application needs.
 */
(function (global) {
    System.config({
        paths: {
            // paths serve as alias
            'npm:': 'node_modules/'
        },
        // map tells the System loader where to look for things
        map: {
            // our app is within the app folder
            app: 'app',
            // angular bundles
            '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
            '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
            '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
            '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
            '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
            '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
            '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
            '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
            // other libraries
            'rxjs': 'npm:rxjs',
            'angular2-in-memory-web-api': 'npm:angular2-in-memory-web-api',
        },
        // packages tells the System loader how to load when no filename and/or no extension
        packages: {
            app: {
                main: './main.js',
                defaultExtension: 'js'
            },
            rxjs: {
                defaultExtension: 'js'
            },
            'angular2-in-memory-web-api': {
                main: './index.js',
                defaultExtension: 'js'
            }
        }
    });
})(this);

Press F5 to run your app. If you see My First Angular 2 App on your screen - all is ok. You can proceed developing.

Problems and solutions

Problem: NPM version lower than 3
Solution: Find the location where the global NPM was installed (you can execute the npm root -g command). Then substitute the pathway to Node NPM in the PATH environmental variable with the pathway to the global NPM. Do not forget to do it for the system and for the user, as well as to reboot your workstation.
Problem: Node.JS version lower than 5
Solution: Find the location, where your node.js is installed, and copy the path there. Now go to Tools -> Options -> Projects and Solutions -> External web tools and add a new path there which directs the Studio to the necessary node version (if there isn’t one, just download and install it). Don’t forget to bring the new path to the top. Restart the Studio
Problem: All package installing with errors.
Solution: Try command: "npm cache clear". This will remove all cached before packages and allows you to get clean and fresh latest packages.
Problem: VS throws compile error like: "TS2304: Cannot find name 'Map'".
Solution: Change TypeScript ECMAscript version to 6 version. You can find it at Project properties, TypeScript compile options.

IIS settings for SPA application

Using app as SPA we have to configure IIS server to ignore requests except root and api. This can be achieved with adding custom rule in web.config. Example of this you can find below.

    <rewrite>
      <rules><
        <rule name="AngularJS Routes" stopProcessing="true">
            <match url=".*" />
                <conditions logicalGrouping="MatchAll">
                 <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
                 <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
                 <add input="{REQUEST_URI}" pattern="^/(api)" negate="true" />
                 </conditions>
            <action type="Rewrite" url="/" />
        </rule>
      </rules>
    </rewrite>

More info can be find here: IIS Url Rewrite Module

Cheap and reliable Node.js hosting starts at $3/month, and $1/month static HTML hosting

Drag13 / MvcWithAngular2