module resolution with angular2 / ASP.NET5 (cannot find angular2/core)

Question

I have started a new ASP.NET5/MVC6 project.

Attempt 1 My problem is that when I set moduleResolution to classic in tsconfig.json i receive an error as follows:

Cannot find module 'angular2/core'

Attempt 2 If I change tsconfig.json to use node resolution, the exclude node_modules in tsconfig.js does not work, this is a bug?, which is closed, though it still seems to be a problem, and multiple errors are encountered when studio 2015 trolls through the node_modules folder including every .d.ts in the entire tree. There are hundreds of errors, mostly in rxjs.

Attempt 3 If I remove tsconfig.json completely, I can get the application executing, and the files compiled, but alas, this error in the browser.

Error: (SystemJS) require is not defined

I cannot help but think that the angular2 / typescript support in Visual Studio is a complete mess, and I should go back to angular 1 and MVC5. For the record, I am using typescript 2.0.6, and my visual studio is completely up to date.

Is there a combination of package.json and tsconfig.json that actually works out of the box with Visual Studio 2015 for angular2.

package.json has the following dependencies.

{
  "version": "1.0.0",
  "name": "asp.net",
  "private": true,
  "devDependencies": {
    "angular2": "^2.0.0-beta.17"
  },
  "dependencies": {
    "@types/angular2": "0.0.2",
    "angular2": "^2.0.0-beta.17",
    "es6-shim": "^0.35.1",
    "gulp": "^3.9.1",
    "gulp-jasmine": "^2.4.2",
    "gulp-print": "^2.0.1",
    "gulp-sass": "^2.3.2",
    "gulp-typings": "^2.0.4",
    "gulp-watch": "^4.3.10",
    "karma": "^1.3.0",
    "reflect-metadata": "^0.1.8",
    "rxjs": "^5.0.0-rc.2",
    "zone.js": "^0.6.26"
  }
}

tsconfig.json is as follows

{
  "compilerOptions": {
    "experimentalDecorators": true,
    "moduleResolution": "classic"
  },
  "exclude": ["node_modules"]
}

boot.ts is as follows

/// <reference path="../node_modules/angular2/core.d.ts"/>
//  the above is a correct path, but it doesn't seem to matter.
import {bootstrap} from "angular2/platform/browser";
//                       ~~~~~~~~~~~~~~~~~~~~~~~~~ (Error Here)
import {HTTP_PROVIDERS} from "angular2/http";
import {AppComponent} from "./app.component";

bootstrap(AppComponent, [HTTP_PROVIDERS]);
console.log("starting angular...");

app.component.js

/// <reference path="../node_modules/angular2/core.d.ts"/>

import { Component, OnInit } from "angular2/core";
//                                 ~~~~~~~~~~~~~ (Error Here)

@Component({
    selector: "app",
    templateUrl: "static.html"
})
export class AppComponent implements OnInit {
    message: string;

    constructor() {
        console.log("starting app component");
    }

    ngOnInit() {
        this
            .message =
            "The 'static.html' was used as the Angular2 'templateUrl'. There is a 'message' property bound to the <blockqoute> element.";
    }
}

KarateJB KarateJB · Accepted Answer · 2016-11-10T07:00:20

NB: Make certain that es6-shim.d.ts is installed in the wwwroot directory. Many of the node_modules files traversed by typescript cannot be compiled without es6-shim.d.ts

I have a sample on integrating angular2(2.1.0) and ASP.NET core, I think the ng2's packages dependencies will also work on ASP.NET5.

package.json

systemjs.config.js

Hope it helps!

module resolution with angular2 / ASP.NET5 (cannot find angular2/core)

1 Answers