Angular 2快速入门 – 我的应用程序组件不加载
试图学习angular度,所以我已经开始在他们的网站( https://angular.io/guide/quickstart )的TypeScript快速入门教程,
我正在研究Ubuntu 14.04。
我已经按照每一步,最后我没有得到任何错误,但组件不加载。 相反,我所看到的唯一的事情是“加载…”,而不是主要组件“我的应用程序”。
我在浏览器中看到的
index.html :
<html> <head> <title>Angular 2 QuickStart</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="styles.css"> <!-- 1. Load libraries --> <!-- Polyfill(s) for older browsers --> <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/systemjs/dist/system.src.js"></script> <!-- 2. Configure SystemJS --> <script src="systemjs.config.js"></script> <script> System.import('app').catch(function(err){ console.error(err); }); </script> </head> <!-- 3. Display the application --> <body> <my-app>Loading...</my-app> </body> </html>
app / app.component.ts :
import { Component } from '@angular/core'; @Component({ selector: 'my-app', template: '<h1>My First Angular 2 App</h1>' }) export class AppComponent { }
我看不出其他的configuration文件,因为它们和本教程中的完全一样。 唯一的变化是我已经改变了tsconfig.json
"target": "es6",
因为这不起作用。
可能是什么问题? 为什么不加载我的主要组件?
编辑:这些是我的浏览器控制台中的错误:
2 http://localhost:3000/node_modules/systemjs/dist/system.src.js Failed to load resource: the server responded with a status of 404 (Not Found) systemjs.config.js:46 Uncaught TypeError: System.config is not a function http://localhost:3000/app/ Failed to load resource: the server responded with a status of 404 (Not Found) app:18 Not Found: http://localhost:3000/app Error loading http://localhost:3000/app(anonymous function) @ app:18 http://localhost:3000/app/ Failed to load resource: the server responded with a status of 404 (Not Found)
我遇到了类似的问题,终于find问题所在。
在我的情况下,当我运行npm start
浏览器控制台错误是XHR error (404 Not Found) loading http://localhost:3000/app/main.js
我意识到我缺lessmain.js
,但我有/app/main.ts
打字稿文件(.ts)未被编译为JS(.js)文件。 然后发现tsconfig.json文件末尾有一个额外的字符“\”。 它在资源pipe理器或Atom中是不可见的,直到terminalinputtsconfig
并按Tab键自动完成。 它显示在文件名的末尾有一个额外的字符。 然后用这个命令$ mv tsconfig.json\ tsconfig.json
,名字被改变了。 然后用npm启动,它工作得很好。
所以请检查您的控制台中的所有文件名称。 希望你的一个也能正常工作。
我想你忘了添加main.ts(请参阅教程中的第3步 – https://angular.io/guide/quickstart )