Angular 2快速入门 - 我的应用程序组件未加载 - 编程

Trying to learn angular so I've started with the quickstart tutorial for TypeScript in their website (https://angular.io/guide/quickstart)

尝试学习角度,所以我开始在他们的网站上使用TypeScript的快速入门教程(https://angular.io/guide/quickstart)

I'm working on ubuntu 14.04.

我正在研究ubuntu 14.04。

I've followed through each step, and at the end I'm not getting any errors, but the component does not load. Instead, the only thing I am seeing is "Loading..." instead of the main component "my-app".

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

what i see in my browser

我在浏览器中看到的内容

the 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 { }

I see no point in showing the rest of the configuration files because they are exactly like the ones in the tutorial. The only change is that I've changed tsconfig.json to

我认为显示其余配置文件没有意义,因为它们与教程中的完全相同。唯一的变化是我已经将tsconfig.json更改为

"target": "es6",

because it didn't work otherwise.

因为它不起作用。

What can be the problem? Why is it not loading my main component?

可能是什么问题?为什么不加载我的主要组件?

Edit: these are the errors in my browser console:

编辑:这些是我的浏览器控制台中的错误:

 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)

2 个解决方案

#1

I had kind of similar problem and was finally able to find where the problem is.

我有类似的问题,终于能够找到问题所在。

In my case, when I ran npm start in browser console error was XHR error (404 Not Found) loading http://localhost:3000/app/main.js.I realized that I am missing main.js, but I have /app/main.ts.

在我的情况下,当我在浏览器控制台中运行npm start错误是XHR错误(404 Not Found)加载http:// localhost:3000 / app / main.js.I意识到我缺少main.js,但我有/应用程序/ main.ts。

Typescript files(.ts) were not compiled to JS(.js) files. Then it was found that an additional character "\" at the end of tsconfig.json file. It was not visible in explorer or in Atom, untill in Terminal typed tsconfig and pressed Tab key for auto completion. It shown that there is an additional character at the end of the file name. Then with this command $ mv tsconfig.json\ tsconfig.json, the name was changed. And then with npm start, it just worked fine.

打字稿文件(.ts)未编译为JS(.js)文件。然后在tsconfig.json文件的末尾发现了另一个字符“\”。它在资源管理器或Atom中不可见,直到终端类型tsconfig并按Tab键自动完成。它显示文件名末尾有一个附加字符。然后使用此命令$ mv tsconfig.json \ tsconfig.json,名称已更改。然后在npm启动时,它运行良好。

So please check all your file names in console. Hope your one will also work fine.

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

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

2 个解决方案

#1

更多相关文章

随机推荐