從http：// localhost：3000/app/main.ts加載http：// localhost：3000/@ angular/platform-browser-dynamic作爲「@ angular/platform-browser-dynamic」時出錯

我無法瞭解錯誤。它說從http：// localhost：3000/app/main.ts加載http：// localhost：3000/@ angular/platform-browser-dynamic作爲「@ angular/platform-browser-dynamic」時出錯

*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的新手。請幫忙。

來源

2017-03-09 Sohail

您在index.html中的System.config用於在瀏覽器中進行轉譯。唯一一次你想要這樣做的是，如果你正在創建一個笨蛋的例子。對於開發，你可以在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

來源

2017-03-20 01:25:11

從http：// localhost：3000/app/main.ts加載http：// localhost：3000/@ angular/platform-b​​rowser-dynamic作爲「@ angular/platform-b​​rowser-dynamic」時出錯

回答

相關問題

從http：// localhost：3000/app/main.ts加載http：// localhost：3000/@ angular/platform-browser-dynamic作爲「@ angular/platform-browser-dynamic」時出錯