Question

我正在开始编码经验并运行一些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开始，网站加载，我什么都没看到。怎么了？我错过了什么或什么？我三重检查，跟着5分钟的角度开始...同样的事情。请帮助菜鸟。

控制台和文件结构：

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

Answer 1

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

angular2 tutorial - 模板不在节点应用中显示

1 个答案: