Angular 加载错误http://localhost:3000/@角度/平台浏览器动态设置为@角度/平台浏览器动态“；从…起http://localhost:3000/app/main.ts

我无法理解这个错误。上面说

*Error loading http://localhost:3000/@angular/platform-browser-dynamic as "@angular/platform-browser-dynamic" from http:// localhost:3000/app/main.ts
at o (system.src.js:4597)
at XMLHttpRequest.I.s.onreadystatechange (system.src.js:4597)*

这是我的app.component.cs

import {Component} from "@angular/core";<br/>
import {ListComponent} from "./List/list.component";<br/>
import {ContactComponent} from "./Contact/contact-form.component";

@Component({
selector: 'my-app',
template: `
{{title}} 
<a routerLink="/myList"></a><router-outlet></router-outlet>
`    
})

export class AppComponent {
title: 'My Angular App';
}

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { RouterModule } from '@angular/router';
import { ListComponent } from './List/list.component'

@NgModule({
imports: [BrowserModule,
    RouterModule.forRoot([
        {
            path: 'myList',
            component: ListComponent
        }
    ])],

declarations: [AppComponent,ListComponent],
bootstrap: [AppComponent],


})
export class AppModule { }

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';

platformBrowserDynamic().bootstrapModule(AppModule);

(function (global) {
 System.config({
    paths: {

      'npm:': 'node_modules/'
    },

    map: {

      app: 'app',


'@angular/core': 'npm:@angular/core/bundles/core.umd.js',
'@angular/common': 'npm:@angular/common/bundles/common.umd.js',
'@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
'@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
 '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
'@angular/http': 'npm:@angular/http/bundles/http.umd.js',
'@angular/router': 'npm:@angular/router/bundles/router.umd.js',
'@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',


'rxjs':                       'npm:rxjs',
'angular2-in-memory-web-api': 'npm:angular2-in-memory-web-api',
        },

        packages: {
          app: {
            main: './main.js',
            defaultExtension: 'js'
          },
          rxjs: {
            defaultExtension: 'js'
          },
          'angular2-in-memory-web-api': {
            main: './index.js',
            defaultExtension: 'js'
          }
    }
  });
})(this);

这是我的main.ts

import {Component} from "@angular/core";<br/>
import {ListComponent} from "./List/list.component";<br/>
import {ContactComponent} from "./Contact/contact-form.component";

@Component({
selector: 'my-app',
template: `
{{title}} 
<a routerLink="/myList"></a><router-outlet></router-outlet>
`    
})

export class AppComponent {
title: 'My Angular App';
}

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { RouterModule } from '@angular/router';
import { ListComponent } from './List/list.component'

@NgModule({
imports: [BrowserModule,
    RouterModule.forRoot([
        {
            path: 'myList',
            component: ListComponent
        }
    ])],

declarations: [AppComponent,ListComponent],
bootstrap: [AppComponent],


})
export class AppModule { }

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';

platformBrowserDynamic().bootstrapModule(AppModule);

(function (global) {
 System.config({
    paths: {

      'npm:': 'node_modules/'
    },

    map: {

      app: 'app',


'@angular/core': 'npm:@angular/core/bundles/core.umd.js',
'@angular/common': 'npm:@angular/common/bundles/common.umd.js',
'@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
'@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
 '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
'@angular/http': 'npm:@angular/http/bundles/http.umd.js',
'@angular/router': 'npm:@angular/router/bundles/router.umd.js',
'@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',


'rxjs':                       'npm:rxjs',
'angular2-in-memory-web-api': 'npm:angular2-in-memory-web-api',
        },

        packages: {
          app: {
            main: './main.js',
            defaultExtension: 'js'
          },
          rxjs: {
            defaultExtension: 'js'
          },
          'angular2-in-memory-web-api': {
            main: './index.js',
            defaultExtension: 'js'
          }
    }
  });
})(this);

index.html

<!DOCTYPE html>
<html>
<head>
<title>Angular App</title>
<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/es6-        shim/0.33.3/es6-shim.min.js"></script>
<script     src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.20/system-polyfills.js"></script>
<script src="https://code.angularjs.org/tools/syst
<script src="https://code.angularjs.org/tools/system.js"></script> 
<script src="https://code.angularjs.org/tools/typescript.js"></script> 
<base href="/">
<script>
        System.config ({
        transpiler: 'typescript',
        typescriptOptions: { emitDecoratorMetadata: true },
        packages: {'app': {defaultExtension: 'ts'}},
        map: { 'app': './app' }
        });
            System.import('app/main')
                .then(null, console.error.bind(console));
</script>
</head>
<body>
   <my-app>Loading...</my-app>
</body>
</html>

这是我的systemjs.config.js

import {Component} from "@angular/core";<br/>
import {ListComponent} from "./List/list.component";<br/>
import {ContactComponent} from "./Contact/contact-form.component";

@Component({
selector: 'my-app',
template: `
{{title}} 
<a routerLink="/myList"></a><router-outlet></router-outlet>
`    
})

export class AppComponent {
title: 'My Angular App';
}

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { RouterModule } from '@angular/router';
import { ListComponent } from './List/list.component'

@NgModule({
imports: [BrowserModule,
    RouterModule.forRoot([
        {
            path: 'myList',
            component: ListComponent
        }
    ])],

declarations: [AppComponent,ListComponent],
bootstrap: [AppComponent],


})
export class AppModule { }

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';

platformBrowserDynamic().bootstrapModule(AppModule);

(function (global) {
 System.config({
    paths: {

      'npm:': 'node_modules/'
    },

    map: {

      app: 'app',


'@angular/core': 'npm:@angular/core/bundles/core.umd.js',
'@angular/common': 'npm:@angular/common/bundles/common.umd.js',
'@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
'@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
 '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
'@angular/http': 'npm:@angular/http/bundles/http.umd.js',
'@angular/router': 'npm:@angular/router/bundles/router.umd.js',
'@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',


'rxjs':                       'npm:rxjs',
'angular2-in-memory-web-api': 'npm:angular2-in-memory-web-api',
        },

        packages: {
          app: {
            main: './main.js',
            defaultExtension: 'js'
          },
          rxjs: {
            defaultExtension: 'js'
          },
          'angular2-in-memory-web-api': {
            main: './index.js',
            defaultExtension: 'js'
          }
    }
  });
})(this);

最后但并非最不重要的一点，这是我的tsconfig.json

{
  "name": "angular2-demo",
  "version": "1.0.0",
  "scripts": {
    "start": "concurrent \"npm run tsc:w\" \"npm run lite\" ",
    "tsc": "tsc",
    "tsc:w": "tsc -w",
    "lite": "lite-server",
    "typings": "typings",
    "postinstall": "typings install"
  },
  "license": "ISC",
  "dependencies": {
    "@angular/common": "^2.3.1",
    "@angular/compiler": "^2.3.1",
    "@angular/core": "^2.3.1",
    "@angular/forms": "^2.3.1",
    "@angular/http": "^2.3.1",
    "@angular/platform-browser": "^2.3.1",
    "@angular/platform-browser-dynamic": "^2.3.1",
    "@angular/router": "^3.3.1",
    "core-js": "^2.4.1",
    "rxjs": "^5.0.1",
    "ts-helpers": "^1.1.1",
    "zone.js": "^0.7.2"
  },
 "devDependencies": {
    "concurrently": "^2.2.0",
    "lite-server": "^2.2.0",
    "typescript": "^1.8.10",
    "typings": "^1.0.4",

    "canonical-path": "0.0.2",
    "http-server": "^0.9.0",
    "tslint": "^3.7.4",
    "lodash": "^4.11.1",
    "jasmine-core": "~2.4.1",
    "karma": "^1.2.0",
    "karma-chrome-launcher": "^0.2.3",
    "karma-cli": "^0.1.2",
    "karma-htmlfile-reporter": "^0.2.2",
    "karma-jasmine": "^0.3.8",
    "protractor": "^3.3.0",
    "rimraf": "^2.5.2"
  }
}

{
  "compilerOptions": {
    "target": "es5",
    "module": "system",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false
  }
  ,
  "exclude": [
    "node_modules"
  ]
}

---

我有很多解决办法，但没有一个对我有效。我不知道怎么了，我对Angular 2还不熟悉。请帮忙

index.html中的System.config用于在浏览器中传输。你唯一想做的就是创建一个plunker示例。对于开发，您可以在index.html中使用类似的内容

<script src="systemjs.config.js"></script>
<script>
      System.import('main.js').catch(function(err){ console.error(err); });
</script>

System.import（'main.js'）.catch（函数（err）{console.error（err）；}）；

对于生产，您需要提前进行传输

我建议您从下面的快速入门示例开始