Question

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

我正在研究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)

Answer 1

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

就我而言，当我在浏览器控制台中运行npm start时，错误为XHR error (404 Not Found) loading http://localhost:3000/app/main.js。我意识到我错过了main.js，但我有/app/main.ts。

Typescript文件（.ts）未编译为JS（.js）文件。然后发现另外一个角色＆＃34; \＆＃34;在tsconfig.json文件的末尾。它在资源管理器或Atom中不可见，直到终端类型tsconfig并按Tab键自动完成。它显示文件名末尾有一个附加字符。然后使用此命令$ mv tsconfig.json\ tsconfig.json，名称已更改。然后用npm开始，它运行正常。

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

Answer 2

I think you forgot to add main.ts (Refer step 3 from tutorial - https://angular.io/guide/quickstart)

Answer 3

你失踪了

<base href="/">

在您的index.html文件中

index.html应该看起来像：

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Frontend</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<app-root></app-root>
</body>
</html>

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

3 个答案: