I am diving into a fresh ASP.NET5/MVC6 project and facing some challenges along the way.
Struggle 1 When I opt for classic as the moduleResolution in my tsconfig.json, I encounter an error stating:
Cannot locate module 'angular2/core'
Struggle 2 Switching to use node resolution in tsconfig.json, the exclusion of node_modules in tsconfig.js seems ineffective, leading me to wonder if this could be a bug?. Although marked resolved, it still persists causing multiple errors during Visual Studio 2015 traversal through every .d.ts file within node_modules hierarchy, predominantly in rxjs.
Struggle 3 By removing tsconfig.json entirely, while the application runs and files compile smoothly, a browser error arises.
Error: (SystemJS) require is not defined
The angular2/typescript integration in Visual Studio reflects a sense of chaos, prompting thoughts of reverting to angular 1 and MVC5. Simply put, I am utilizing typescript 2.0.6 with an updated Visual Studio environment.
Is there a predefined combination of
package.jsonandtsconfig.jsonthat seamlessly integrates with Visual Studio 2015 for angular2?
The listed dependencies are outlined in the package.json.
{
"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"
}
}
The configurations present in tsconfig.json are as follows:
{
"compilerOptions": {
"experimentalDecorators": true,
"moduleResolution": "classic"
},
"exclude": ["node_modules"]
}
Code snippet from boot.ts:
/// <reference path="../node_modules/angular2/core.d.ts"/>
// this reference appears valid yet triggers an error.
import {bootstrap} from "angular2/platform/browser";
// ~~~~~~~~~~~~~~~~~~~~~~~~~ (Error Detected)
import {HTTP_PROVIDERS} from "angular2/http";
import {AppComponent} from "./app.component";
bootstrap(AppComponent, [HTTP_PROVIDERS]);
console.log("starting angular...");
Content within
app.component.js</p>
<pre><code>/// <reference path="../node_modules/angular2/core.d.ts"/>
import { Component, OnInit } from "angular2/core";
// ~~~~~~~~~~~~~ (Another 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.";
}
}