angular2教程 – 模板不显示在节点的应用程序

我开始我的编码经验,并运行一些angular2教程。 事情是我被卡住了,读了几个类似的话题后,我无处可去。 任务是用简单的模板string创build模块,并将其放置在index.html中的网页上

app.component.ts

import {Component} from '@angular/core'; @Component ({ selector: 'articles', template: '<h1>To jest komponent1</h1>', }) export class AppComponent { } 

main.ts

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

的package.json

 { "name": "angular2-quickstart", "version": "1.0.0", "scripts": { "start": "tsc && concurrently \"npm run tsc:w\" \"npm run lite\" ", "lite": "lite-server", "postinstall": "typings install", "tsc": "tsc", "tsc:w": "tsc -w", "typings": "typings" }, "license": "ISC", "dependencies": { "@angular/common": "2.0.0-rc.1", "@angular/compiler": "2.0.0-rc.1", "@angular/core": "2.0.0-rc.1", "@angular/http": "2.0.0-rc.1", "@angular/platform-browser": "2.0.0-rc.1", "@angular/platform-browser-dynamic": "2.0.0-rc.1", "@angular/router": "2.0.0-rc.1", "@angular/router-deprecated": "2.0.0-rc.1", "@angular/upgrade": "2.0.0-rc.1", "systemjs": "0.19.27", "core-js": "^2.4.0", "reflect-metadata": "^0.1.3", "rxjs": "5.0.0-beta.6", "zone.js": "^0.6.12", "angular2-in-memory-web-api": "0.0.9", "bootstrap": "^3.3.6" }, "devDependencies": { "concurrently": "^2.0.0", "lite-server": "^2.2.0", "typescript": "^1.8.10", "typings":"^0.8.1" } } 

system.config.js

 /** * System configuration for Angular 2 samples * Adjust as necessary for your application needs. */ (function(global) { // map tells the System loader where to look for things var map = { 'app': 'app', // 'dist', '@angular': 'node_modules/@angular', 'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api', 'rxjs': 'node_modules/rxjs' }; // packages tells the System loader how to load when no filename and/or no extension var packages = { 'app': { main: 'main.js', defaultExtension: 'js' }, 'rxjs': { defaultExtension: 'js' }, 'angular2-in-memory-web-api': { defaultExtension: 'js' }, }; var ngPackageNames = [ 'common', 'compiler', 'core', 'http', 'platform-browser', 'platform-browser-dynamic', 'router', 'router-deprecated', 'upgrade', ]; // Add package entries for angular packages ngPackageNames.forEach(function(pkgName) { packages['@angular/'+pkgName] = { main: pkgName + '.umd.js', defaultExtension: 'js' }; }); var config = { map: map, packages: packages } System.config(config); })(this); 

tsconfig.json

 { "compilerOptions": { "target": "es5", "module": "commonjs", "moduleResolution": "node", "sourceMap": true, "emitDecoratorMetadata": true, "experimentalDecorators": true, "removeComments": false, "noImplicitAny": false }, "exclude": [ "node_modules", "typings/main", "typings/main.d.ts" ] } 

typings.json

 { "ambientDependencies": { "core-js": "registry:dt/core-js#0.0.0+20160317120654", "jasmine": "registry:dt/jasmine#2.2.0+20160412134438", "node": "registry:dt/node#4.0.0+20160509154515" } } 

和finaly index.html

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="styles.css"> <title>Angular 2</title> <script src="node_modules/core-js/client/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/rx.js"></script> <script src="node_modules/systemjs/dist/system.src.js"></script> <script src="systemjs.config.js"></script> <script> System.import('app').catch(function(err){ console.error(err); }); </script> </head> <body> <articles></articles> </body> </html> 

我开始npm开始,网站加载,我什么都看不到。 哪里不对? 我错过了什么或什么? 我三重检查,跟着5minangular开始…一样的事情。 请帮小菜。

控制台和文件结构:

 [1] 16.05.24 11:03:50 304 GET /index.html [1] 16.05.24 11:03:51 304 GET /node_modules/core-js/client/shim.min.js [1] 16.05.24 11:03:51 304 GET /node_modules/zone.js/dist/zone.js [1] 16.05.24 11:03:51 304 GET /node_modules/reflect-metadata/Reflect.js [1] 16.05.24 11:03:51 304 GET /node_modules/systemjs/dist/system.src.js [1] 16.05.24 11:03:51 304 GET /styles.css [1] 16.05.24 11:03:51 304 GET /node_modules/rxjs/rx.js [1] 16.05.24 11:03:51 404 GET /systemjs.config.js [1] 16.05.24 11:03:52 303 GET /app [1] 16.05.24 11:03:52 404 GET /app/ [1] 16.05.24 11:03:52 404 GET /favicon.ico 
  • 应用:
    • app.component.ts
    • main.ts
  • 分型
  • node_modulestypes

  • 的index.html

  • 的package.json
  • styles.css的
  • system.config.js
  • typings.json
  • tsconfig.json

       

网上收集的解决方案 "angular2教程 – 模板不显示在节点的应用程序"