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.

I have updated the question with the npm output when I restore packages. — Naveed Ahmed, May 06 '16 at 15:58
Wonder why npm is looking for 'angular/xxxx' and not '@angular/xxxx'. I am using Angular2 RC1 with asp.net5 and is working ok. wish i could offer more help. I would suggest running npm install from the command line and not from within VS studio — brando, May 06 '16 at 17:43
Brando thank you for your reply. I am able to resolve this issue, actually VS was pointing to old version of npm. I have added an answer with more details. But now I am having some other issues related to missing typings etc, can you please check the answer I added and guide further. — Naveed Ahmed, May 06 '16 at 19:11
@NaveedAhmed Here is my answer for getting over the headache of missing typings: http://stackoverflow.com/a/36948893/3532945 — brando, May 07 '16 at 01:27

score 14 · Accepted Answer · edited Oct 03 '17 at 18:08

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:

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

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.

Check my answer here for removing typing issues: http://stackoverflow.com/a/36948893/3532945 — brando, May 07 '16 at 01:29
Thank you Brando for your comment and guidance. Although I was also able to remove typings errors by following the Barry's suggestion as well i.e by importing /// on top of main.ts . But now I am receiving 404 error for Angular files when I run it in browser. I am not sure which of the Angular files I need to copy in wwwroot/lib folders — Naveed Ahmed, May 07 '16 at 10:15
I'm using rc5 and still get the errors for map although it does run (it ran before I upgraded Node.js too). I added the typings reference path and it makes no difference to the errors.However when I use "of" on an observable I get an error it can't get past no matter what version of Node.js I use. Very frustrating — Crob, Aug 24 '16 at 16:15
Try upgrading to TypeScript 2. In Visual Studio click Tools > Extensions and Updates, then select Online from the list shown on left of the dialog and then search for TypeScript, from results install TypeScript 2.0 Beta for Microsoft Visual Studio 2015. Restart computer and hopefully it will fix all map errors. — Naveed Ahmed, Aug 24 '16 at 22:00

score 1 · Answer 2 · answered May 06 '16 at 19:57

1

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

answered May 06 '16 at 19:57

Barry

31
1
10

Barry, are you seeing any 404 errors in browser when you run your application? I am seeing the below in console: http://localhost:62550/@angular/platform-browser-dynamic 404 (Not Found) Error: XHR error (404 Not Found) loading http://localhost:62550/@angular/platform-browser-dynamic(…) http://localhost:62550/@angular/core 404 (Not Found) http://localhost:62550/@angular/http 404 (Not Found) http://localhost:62550/@angular/router-deprecated 404 (Not Found) http://localhost:62550/@angular/core 404 (Not Found) – Naveed Ahmed May 06 '16 at 21:41
http://localhost:62550/@angular/router-deprecated 404 (Not Found) http://localhost:62550/@angular/http 404 (Not Found) http://localhost:62550/@angular/common 404 (Not Found) I have copied the below script files in wwwwroot/lib folder but not sure how to include the actual angular files. – Naveed Ahmed May 06 '16 at 21:44
I have copied the below script files in wwwroot/lib folder but not sure how to include the actual angular files. – Naveed Ahmed May 06 '16 at 21:44
did u add system.config.js to fetch angular? – Barry May 09 '16 at 13:10
Yes but since its MVC6 project therefore system.config.js cant access node_modules folder because it in the root of the project and not in wwwroot. So we need to move required dependencies in wwwroot, but I am not sure which files I need to move to wwwroot, can you please guide? – Naveed Ahmed May 10 '16 at 21:50
you can move all dependencies as a whole folder with all files because upto beta 17 i moved only required files but for now i moved whole folder using gulp – Barry May 11 '16 at 17:16

Barry · Answer 3 · 2016-05-06T19:56:09.620

0

The solution for this issue can be upgrading the version of Node and NPM as described here (problem exists with NPM/Node versions - anything above node v5.10.1 and npm v3.8.6+ seem to be fine).

download latest node from link below according to your 32/64 bit windows architecture

https://nodejs.org/en/blog/release/v5.10.1/://

edited May 06 '16 at 19:56

answered May 06 '16 at 16:24

Barry

31
1
10

Thank you Barry for your reply. The NPM version I am using is 3.8.9 I have also tried upgrading Node to version 6.1.0 (latest), yet no success. – Naveed Ahmed May 06 '16 at 16:32
i had the same error that resolve using this step, i did uninstall previous node and delete nodejs folder from program files and then restart computer. – Barry May 06 '16 at 16:36
Were you using it with ASP.Net MVC and Angular 2 RC 1? – Naveed Ahmed May 06 '16 at 16:38
yeah asp.net 5 and i upgrade to rc1 but after getting all the packages i am getting this error when i load in browser Error: SyntaxError: Unexpected token <(…) – Barry May 06 '16 at 16:43
Barry thank you for your reply. I am able to resolve this issue, actually VS was pointing to old version of npm, though I had latest version installed on my machine. I have added an answer with more details. But now I am having some other issues related to missing typings etc, can you please check the answer I added and guide further. – Naveed Ahmed May 06 '16 at 19:12
Guys how do you managed to get rid of the Cannot find module '@angular/core' and @angular/platform-browser-dynamic, etc ? – Acosta May 24 '16 at 08:41
https://angular.io/docs/ts/latest/quickstart.html Find system.config.js in the tuts and put it index.html level – Barry May 24 '16 at 13:11

ASP.Net MVC Angular 2 Final

3 Answers3

Linked