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.

Answer 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

Answer 2

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 3

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/://