rco rco - 2 months ago 36
TypeScript Question

404 Not Found @angular/platform-browser.js

I try setup ASP.NET MVC 5 (not Core) + Angular 2.0.0 + JSPM + SystemJS + TS Loader.

When I run app I get 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(…)


@angular packages are in folder jspm_packeges/npm.

Now I really don’t know what is root of problem some breaking change in Angular or something in SystemJS.

Here are my configuration files:

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/common@2.0.0",
"@angular/compiler": "npm:@angular/compiler@2.0.0",
"@angular/core": "npm:@angular/core@2.0.0",
"@angular/http": "npm:@angular/http@2.0.0",
"@angular/platform-browser-dynamic": "npm:@angular/platform-browser-dynamic@2.0.0",
"@angular/router": "npm:@angular/router@3.0.0",
"babel": "npm:babel-core@5.8.38",
"babel-runtime": "npm:babel-runtime@5.8.38",
"core-js": "npm:core-js@1.2.7",
"reflect-metadata": "npm:reflect-metadata@0.1.8",
"rxjs": "npm:rxjs@5.0.0-beta.12",
"ts": "github:frankwallis/plugin-typescript@5.1.2",
"zone.js": "npm:zone.js@0.6.23",
"github:frankwallis/plugin-typescript@5.1.2": {
"typescript": "npm:typescript@2.0.2"

//...
}
});


index.html

<script>
System.config
({
transpiler: "ts",
packages:
{
"app": {
"defaultExtension": "ts",
}
}
});

System.import('app/bootstrap').catch(console.log.bind(console));
</script>


Visual Studio complains for all angular imports.

bootstrap.js

import {bootstrap} from "@angular/platform-browser"
import {provide} from "@angular/core"

Answer

Seems like: '@angular/platform-browser': 'npm:@angular/platform-browser@2.0.0 package is missing.

map: {
    "@angular/common": "npm:@angular/common@2.0.0",
    "@angular/compiler": "npm:@angular/compiler@2.0.0",
     ...
     ...
    '@angular/platform-browser': "npm:@angular/platform-browser@2.0.0"
     ...
     ...
}

Note: Also add it to package.json if already not there,

"dependencies": {
    "@angular/common": "2.0.0",
    "@angular/compiler": "2.0.0",
     ...
     ...
    "@angular/platform-browser": "2.0.0",
     ...
}