Geek Answers Handbook

Angular2 quick start shows only Download. Not the contents of index.html

for the first time using angular2, following the instructions of the 5-minute quick start guide for angular 2.

everything works well, so there is no error starting npm start

npm start image

but when I open

local: 3000

it displays the text Loading ... which does not expect. according to this example, the contents of index.html should reflect this.

there is an error in the console:

EXCEPTION: TypeError: Cannot set property 'endSourceSpan' from null

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>

Please help me with what is going wrong.

+6
source share
2 answers

I think you have a problem in the template of your main component. For example, an HTML element that is not properly closed:

 template : '<div</div>'

See this question for more information:

Edit

The problem is that your h1 incorrect (no start element):

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

You should check the port number in the list of nodes in your terminal, In Angular2 it will work in 4200. i.e. ** NG Live Development Server runs on http: // localhost: 4200 . ** Then open the local host with the specified port in the browser.

0
source

More articles:


All Articles