未捕获的ReferenceError：未定义系统

未捕获的ReferenceError：未定义系统 - Angular2(Uncaught ReferenceError: System is not defined - Angular2)

index.html页面在屏幕上加载并显示加载。但是，我没有看到我在app.component.ts的模板属性中定义的文本“我的第一个组件”。当我使用F12打开开发人员工具时，我看到错误：

未捕获的ReferenceError：未定义系统。

它指向app.component.js文件中的第一行。有人能告诉我问题是什么吗？

app.component.ts

import { Component } from '@angular/core'; @Component({ selector: 'pm-app', template: ` <div> <h1>{{pageTitle}}</h1> <div> My First Component </div> </div> ` }) export class AppComponent { pageTitle: string = 'Hello World'; }

tsconfig.json

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

的index.html

<!DOCTYPE html> <html> <head> <title>Angular 2 Application</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="app/app.component.css" rel="stylesheet" />   <script src="node_modules/es6-shim/es6-shim.min.js"></script> <script src="node_modules/zone.js/dist/zone.js"></script> <script src="node_modules/reflect-metadata/Reflect.js"></script> <script src="node_modules/rxjs/bundles/Rx.umd.js"></script> <script src="node_modules/@angular/core/core.umd.js"></script> <script src="node_modules/@angular/common/common.umd.js"></script> <script src="node_modules/@angular/compiler/compiler.umd.js"></script> <script src="node_modules/@angular/platform-browser/platform-browser.umd.js"></script> <script src="node_modules/@angular/platform-browser-dynamic/platform-browser-dynamic.umd.js"></script> <script src='app/app.component.js'></script> <script src='app/main.js'></script> <script src="node_modules/systemjs/dist/system.src.js"></script>  <script> System.config({ packages: { app: { format: 'register', defaultExtension: 'js' } } }); System.import('app/main') .then(null, console.error.bind(console)); </script> </head> <body> <pm-app>Loading..</pm-app> </body> </html>

main.ts

import { bootstrap } from '@angular/platform-browser-dynamic'; // Our main component import { AppComponent } from './app.component'; bootstrap(AppComponent);

The index.html page loads on the screen and shows loading. However I don't see the text "My First Component " which i have defined in the template attribute of app.component.ts. When I do a F12 to open up developer tools , I see error:

Uncaught ReferenceError: System is not defined.

It points to the first line in the app.component.js file. Can somebody tell me what the problem is ?

app.component.ts

import { Component } from '@angular/core'; @Component({ selector: 'pm-app', template: ` <div> <h1>{{pageTitle}}</h1> <div> My First Component </div> </div> ` }) export class AppComponent { pageTitle: string = 'Hello World'; }

tsconfig.json

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

index.html

<!DOCTYPE html> <html> <head> <title>Angular 2 Application</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="app/app.component.css" rel="stylesheet" />   <script src="node_modules/es6-shim/es6-shim.min.js"></script> <script src="node_modules/zone.js/dist/zone.js"></script> <script src="node_modules/reflect-metadata/Reflect.js"></script> <script src="node_modules/rxjs/bundles/Rx.umd.js"></script> <script src="node_modules/@angular/core/core.umd.js"></script> <script src="node_modules/@angular/common/common.umd.js"></script> <script src="node_modules/@angular/compiler/compiler.umd.js"></script> <script src="node_modules/@angular/platform-browser/platform-browser.umd.js"></script> <script src="node_modules/@angular/platform-browser-dynamic/platform-browser-dynamic.umd.js"></script> <script src='app/app.component.js'></script> <script src='app/main.js'></script> <script src="node_modules/systemjs/dist/system.src.js"></script>  <script> System.config({ packages: { app: { format: 'register', defaultExtension: 'js' } } }); System.import('app/main') .then(null, console.error.bind(console)); </script> </head> <body> <pm-app>Loading..</pm-app> </body> </html>

main.ts

import { bootstrap } from '@angular/platform-browser-dynamic'; // Our main component import { AppComponent } from './app.component'; bootstrap(AppComponent);