angular2快速入门只显示Loading ..而不是index.html的内容

第一次使用angular2,按照5分钟快速入门指南中的说明进行angular度2。

一切运行良好,意味着运行npm start没有错误

npm开始图像

但是当我打开

本地主机:3000

它显示正在加载…不期望的文本。 根据这个例子index.html的内容应该反映在这个。

在控制台中有错误:

例外:TypeError:无法设置null属性的'endSourceSpan'

main.ts

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

app.component.ts

 import { Component } from '@angular/core'; @Component({ selector: 'my-app', template: 'My first Angular 2 App</h1>' }) export class AppComponent {} 

的index.html

 <html> <head> <title>Angular 2 QuickStart</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="styles.css"> <!-- 1. Load libraries --> <!-- Polyfill(s) for older browsers --> <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/systemjs/dist/system.src.js"></script> <!-- 2. Configure SystemJS --> <script src="systemjs.config.js"></script> <script> System.import('app').catch(function(err){ console.error(err); }); </script> </head> <!-- 3. Display the application --> <body> <my-app>Loading...</my-app> </body> </html> 

请帮助我出了什么问题。

我认为你的主要组件的模板有问题。 例如,未正确closures的HTML元素:

 template : '<div</div>' 

看到这个问题的更多细节:

编辑

问题是你的h1是不正确的(没有开始元素):

 @Component({ selector: 'my-app', template: '<h1>My first Angular 2 App</h1>' // <------ }) export class AppComponent {} 

您应该检查terminal中nodeserver节目的端口号,在Angular2中它将运行在4200.即** NG Live Development Server在http:// localhost:4200上运行 。 **然后在浏览器中用指定的端口打开本地主机。