我正在开始我的编码体验并运行一些 angular2 教程。问题是我被困住了，在阅读了几个类似的主题后我一无所获。 任务是使用简单的模板字符串创建模块并将其放在 web 上的 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"
}
}
系统配置.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"
]
}
打字.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
- 样式.css
- system.config.js
- typings.json
- tsconfig.json
最佳答案
您的应用正在寻找 systemjs.config.js，但您已将其命名为 system.config.js。
关于node.js - angular2 教程 - 模板不显示在 Node 应用程序中，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37409715/