I am attempting to set up ASP.NET MVC 5 (not Core) + Angular 2.0.0 + JSPM + SystemJS + TS Loader.
Upon running the application, I encounter the following error:
Failed to load resource: the server responded with a status of 404 (Not Found)
http://localhost:59711/@angular/platform-browser.js
Error: (SystemJS) XHR error (404 Not Found) loading http://localhost:59711/@angular/platform-browser.js(…)
The @angular packages are located in the jspm_packages/npm folder.
Currently, I am uncertain about the root cause of the issue - whether it's due to some breaking change in Angular or something related to SystemJS.
Below are my configuration files for reference:
tsconfig.json
{
"compilerOptions": {
"target": "es5",
/* target of the compilation (es5) */
"module": "system",
/* System.register([dependencies], function) (in JS)*/
"moduleResolution": "node",
/* how module gets resolved (needed for Angular 2)*/
"emitDecoratorMetadata": true,
/* needed for decorators */
"experimentalDecorators": true,
/* needed for decorators (@Injectable) */
"noImplicitAny": false
/* any has to be written explicity*/
},
"exclude": [
/* since compiling these packages could take ages, we want to ignore them*/
"jspm_packages",
"node_modules"
],
"compileOnSave": false
/* on default the compiler will create js files */
}
config.js (jspm, configuration files is simplified)
System.config({
baseURL: "/",
defaultJSExtensions: true,
transpiler: "babel",
babelOptions: {
"optional": [
"runtime",
"optimisation.modules.system"
]
},
typescriptOptions: {
"tsconfig": true
},
paths: {
"github:*": "jspm_packages/github/*",
"npm:*": "jspm_packages/npm/*"
},
packages: {
"app": {
"main": "bootstrap",
"format": "system",
"defaultExtensions": "ts",
"meta": {
"*.ts": {
"loader": "ts"
}
}
}
},
map: {
"@angular/common": "npm:@angular/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="5734383a3a3839176579677967">[email protected]</a>",
// Add more mapping entries here...
}
});
index.html
<script>
System.config
({
transpiler: "ts",
packages:
{
"app": {
"defaultExtension": "ts",
}
}
});
System.import('app/bootstrap').catch(console.log.bind(console));
</script>
Visual Studio raises issues concerning all angular imports.
bootstrap.js
import {bootstrap} from "@angular/platform-browser"
import {provide} from "@angular/core"