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
你的应用程序正在寻找systemjs.config.js但你已经命名为system.config.js 。