角2快速入门 - 我 - 的应用程序组件不加载

努力学习的角度，所以我已经开始在他们的网站（https://angular.io/guide/quickstart）角2快速入门 - 我 - 的应用程序组件不加载

我工作在Ubuntu 14.04的快速入门教程打字稿。

我已经完成了每一步，最后我没有收到任何错误，但组件没有加载。相反，我看到的只是“加载...”，而不是主要组件“my-app”。

的的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.component.ts：

import { Component } from '@angular/core'; 
@Component({ 
    selector: 'my-app', 
    template: '<h1>My First Angular 2 App</h1>' 
}) 
export class AppComponent { }

我认为没有点在示出的其余部分因为它们与教程中的完全相同。唯一的变化是，我已经改变了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)

来源

2016-06-10 Ziv Cohen

我认为你需要引导应用程序 – juvian

打开你的控制台并检查err消息 – Zen

你使用哪个IDE？ –

我想你忘了添加main.ts（从教程参见第3步 - https://angular.io/guide/quickstart）

来源

2016-06-10 16:13:13 Sanket

不......我添加了它。 ziv @ ziv-K55A：〜/ angular2-quickstart/app $ cat main.ts 从'@ angular/platform-browser-dynamic'导入{bootstrap}; 从'./app.component'导入{AppComponent}; bootstrap（AppComponent）; –

怎么样systemjs.config.js？如果所有文件都存在，请检查您的浏览器控制台是否有错误 – Sanket

我编辑了原始文章并添加了控制台错误。这些文件在那里，但似乎与systemjs.config.js有问题.... –

我有一种类似的问题，并最终能够找到问题所在。

在我的情况，我在浏览器控制台错误跑npm start是XHR error (404 Not Found) loading http://localhost:3000/app/main.js。我意识到，我的思念main.js，但我有/app/main.ts。

Typescript文件（.ts）未编译为JS（.js）文件。然后发现tsconfig.json文件末尾有一个附加字符“\”。在浏览器或Atom中不可见，直到终端输入tsconfig，然后按Tab键以自动完成。它显示文件名末尾有一个附加字符。然后用这个命令$ mv tsconfig.json\ tsconfig.json，这个名字被改变了。然后用npm启动，它工作得很好。

所以请检查您的控制台中的所有文件名。希望你的人也能正常工作。

来源

2016-11-07 09:29:11 SayedRakib

角2快速入门 - 我 - 的应用程序组件不加载

回答

相关问题