加载http：// localhost：3000 / @ angular / platform-b​​rowser-dynamic时出错＆＃34; @ angular / platform-b​​rowser-dynamic＆＃34;来自http：// localhost：3000 / app / main.ts

时间：2017-03-09 10:37:54

标签： angular typescript

我无法理解错误。它说

*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';
}

这是我的 app.module.ts 

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 { }

这是我的 main.ts 

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

platformBrowserDynamic().bootstrapModule(AppModule);

的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>

这是我的 package.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"
  }
}

这是我的 systemjs.config.js 

(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 

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

我有很多解决方案，但没有一个适合我。我不知道什么是错的，我是Angular 2的新手。请帮忙。

1 个答案:

答案 0 :(得分：0)

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>

对于制作，你要做一个时间的转变。

我建议您重新开始使用https://angular.io/guide/quickstart

上的快速入门示例
相关问题
最新问题