ASP.Net MVC Angular 2 Final

Question

Has anyone tried Angular 2 RC Final with ASP.Net MVC?

I am having trouble with configuring Angular 2 RC 6 with ASP.Net MVC, till beta 17 everything was working fine.

The package.json with below configuration doesn't seems to be working:

"dependencies": {
    "@angular/common": "2.0.0-rc.6",
    "@angular/compiler": "2.0.0-rc.6",
    "@angular/core": "2.0.0-rc.6",
    "@angular/forms": "0.3.0",
    "@angular/http": "2.0.0-rc.6",
    "@angular/platform-browser": "2.0.0-rc.6",
    "@angular/platform-browser-dynamic": "2.0.0-rc.6",
    "@angular/router": "3.0.0-rc.1",

    "systemjs": "0.19.27",
    "core-js": "^2.4.0",
    "reflect-metadata": "^0.1.3",
    "rxjs": "5.0.0-beta.6",
    "zone.js": "^0.6.12",

  },

Restoring packages displays the below output in output windows:

====Executing command 'npm install'====


npm WARN package.json @ No description
npm WARN package.json @ No repository field.
npm WARN package.json @ No README data
npm http GET http://registry.npmjs.org/systemjs
npm http GET http://registry.npmjs.org/angular/compiler
npm http GET http://registry.npmjs.org/angular/core
npm http GET http://registry.npmjs.org/angular/http
npm http GET http://registry.npmjs.org/angular/platform-browser
npm http GET http://registry.npmjs.org/angular/platform-browser-dynamic
npm http GET http://registry.npmjs.org/angular/router
npm http GET http://registry.npmjs.org/angular/router-deprecated
npm http GET http://registry.npmjs.org/angular/common
npm http GET http://registry.npmjs.org/reflect-metadata
npm http GET http://registry.npmjs.org/angular/upgrade
npm http 304 http://registry.npmjs.org/systemjs
npm http 404 http://registry.npmjs.org/angular/platform-browser
npm http 404 http://registry.npmjs.org/angular/core
npm ERR! 404 Not Found
npm ERR! 404 
npm ERR! 404 'angular/platform-browser' is not in the npm registry.
npm ERR! 404 You should bug the author to publish it
npm ERR! 404 
npm ERR! 404 Note that you can also install from a
npm ERR! 404 tarball, folder, or http url, or git url.
npm ERR! System Windows_NT 6.2.9200
npm ERR! command "C:\\Program Files (x86)\\Microsoft Visual Studio 14.0\\Common7\\IDE\\Extensions\\Microsoft\\Web Tools\\External\\\\node\\node" "C:\\Program Files (x86)\\Microsoft Visual Studio 14.0\\Common7\\IDE\\Extensions\\Microsoft\\Web Tools\\External\\npm\\node_modules\\npm\\bin\\npm-cli.js" "install"
npm ERR! cwd D:\User\MyProject-MVC6\src\MyProject
npm ERR! node -v v0.10.31
npm ERR! npm -v 1.4.9
npm ERR! code E404
npm http 404 http://registry.npmjs.org/angular/http
npm http 404 http://registry.npmjs.org/angular/compiler
npm http 404 http://registry.npmjs.org/angular/router-deprecated
npm http 404 http://registry.npmjs.org/angular/router
npm http 404 http://registry.npmjs.org/angular/platform-browser-dynamic
npm http 304 http://registry.npmjs.org/reflect-metadata
npm http 404 http://registry.npmjs.org/angular/common
npm http 404 http://registry.npmjs.org/angular/upgrade
npm

====npm command completed with exit code 1====

Step by step instructions to use Angular2 RC 6 with ASP.Net MVC would be highly appreciated.

Answer 1

Got it fixed! sharing the details if anyone still struggling to get Angular 2 Final work with ASP.Net MVC

Let me thank Barry and Brando for their guidance at different points.

I was able to fix the above errors by following the below steps:

Visual Studio 2015 is shipped with a very old version of npm. Therefore the very first thing your need to do is download and install the latest version of Node from https://nodejs.org/en/ (I installed v6.1.0, current latest).

After installation, you need to tell Visual Studio to use latest version of node instead of the embedded old version. For this follow the below steps:

1. In Visual Studio from top menu go to Tools > Options
2. Expand Project and Solution node shown in dialog
3. Select External Web Tools
4. Add a new entry pointing to C:\Program Files\nodejs (or to the location where you installed nodejs)
5. Move it to the top of the list.

6. Restart Visual Studio and restore npm packages.

This should fixed the above errors, but now if you try to compile the project, you might see alot of errors mainly due to the missing type definitions, such as:

Severity Code Description Project File Line Suppression State
Error TS6053 Build: File /node_modules/angular2/ts/typings/jasmine/jasmine.d.ts' not found

Invalid module name in augmentation, module '../../Observable' cannot be found.
TypeScript Virtual Projects node_modules\rxjs\add\operator\zip.d.ts

Property 'map' does not exist on type 'Observable'.

To fix above errors, all you need to do is just add the below link on top of your main.ts or bootstrap.ts:

///<reference path="./../typings/browser/ambient/es6-shim/index.d.ts"/>

This should fix the above typings errors.

With RC, Angular team is offering all components as a separate files. So, in past if you were able to include the Angular package as a packaged file angular2.dev.js (or min file) in Index file, this wont work now. The required components needs to be included in index which your app needs. You can use systemjs.config.js to include add dependencies. I would highly recommend going through the official Quick Start guide specially this section:

Link: https://angular.io/guide/quickstart

Even after proper configuration by following the above steps, when you run your application, you might see 404, for missing angular files.

The reason is, by default ASP.Net 5 looks for the Angular dependencies in /wwwroot/node_modules/ folder. And since node_modules is in project root folder not in wwwroot folder, the browser returns 404 (no found errors). So, moving the @angular folder from node_modules folder to wwwroot should fix the issue.

Map Errors

In some cases upgrading TypeScript version also fixes the map errors:

Try upgrading to TypeScript 2 by following below steps: - In Visual Studio click Tools > Extensions and Updates - Select Online from the list shown on left of the dialog - Search for TypeScript - From search results install TypeScript 2.0 Beta for Microsoft Visual Studio 2015. - Restart computer and hopefully it will fix all map errors

Hope this helps.

Answer 2

you have to add

/// <reference path="../node_modules/angular2-in-memory-web-api/typings/browser.d.ts" />

on top of your main.ts or bootstrap.ts that will remove typings error

reference is included in

angular2-in-memory-web-api