angular2 教程 - 模板未显示在节点应用程序中答案

【问题标题】：angular2 tutorial - template not displaying in node appangular2 教程 - 模板未显示在节点应用程序中
【发布时间】：2016-09-21 10:32:34
【问题描述】：

我正在开始我的编码体验并运行一些 angular2 教程。事情是我被卡住了，在阅读了几个类似的主题后，我一无所获。任务是使用简单的模板字符串创建模块并将其放在 index.html 中的 web 上

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"
  }
}

最后是 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 start，网站加载，我什么也看不到。怎么了？我错过了什么还是什么？我三重检查，遵循 5 分钟 Angular 开始......同样的事情。请帮助菜鸟。

控制台和文件结构：

[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_modules 类型
index.html
package.json
styles.css
system.config.js
typings.json
tsconfig.json

【问题讨论】：

您是否在控制台中遇到错误？
你的项目结构是什么？您的源代码（ts 文件）是否位于 app 文件夹下？
您的文件应该被正确编译以使您的项目运行。
在文章末尾添加。

标签： node.js angular

【解决方案1】：

您的应用正在寻找 systemjs.config.js，但您已将其命名为 system.config.js。

【讨论】：