来自官方 Angular 文档的“mock-heroes.ts'不是模块”错误答案

【问题标题】："mock-heroes.ts' is not a module" error from official Angular doc来自官方 Angular 文档的“mock-heroes.ts'不是模块”错误
【发布时间】：2017-12-05 15:55:45
【问题描述】：

我正在尝试遵循官方 Angular 文档：

https://angular.io/tutorial/toh-pt2

但由于此错误而无法继续：

编译失败。

C:/Users/username/Desktop/my-app/src/app/heroes/heroes.component.ts (3,24): 
File 'C:/Users/username/Desktop/my-app/src/app/mock-heroes.ts' is not a module.

我的代码与教程中的完全一样，这真是令人沮丧，来自官方文档，让我什至不想学习 Angular :( 有人知道如何克服它吗？

mock-heroes.ts：

import { Hero } from './hero';

export const HEROES: Hero[] = [
  { id: 11, name: 'Mr. Nice' },
  { id: 12, name: 'Narco' },
  { id: 13, name: 'Bombasto' },
  { id: 14, name: 'Celeritas' },
  { id: 15, name: 'Magneta' },
  { id: 16, name: 'RubberMan' },
  { id: 17, name: 'Dynama' },
  { id: 18, name: 'Dr IQ' },
  { id: 19, name: 'Magma' },
  { id: 20, name: 'Tornado' }
];

hero.ts：

export class Hero {
  id: number;
  name: string;
}

heroes.components.ts：

import { Component, OnInit } from '@angular/core';
import { Hero } from '../hero';
import { HEROES } from '../mock-heroes';

@Component({
  selector: 'app-heroes',
  templateUrl: './heroes.component.html',
  styleUrls: ['./heroes.component.css']
})

export class HeroesComponent implements OnInit {

    heroes = HEROES;

    constructor() { }

    ngOnInit() {
    }

}

heroes.component.html：

<h2>My Heroes</h2>
<ul class="heroes">
  <li *ngFor="let hero of heroes">
    <span class="badge">{{hero.id}}</span> {{hero.name}}
  </li>
</ul>

【问题讨论】：

您说您的文件是 heroe.ts 但您是 import { Hero } from '../hero'; - 这是您的文件名中的错字还是您的问题？
@JamieBarker 很好，不，这只是问题中的错字。我会编辑它。
您也可以在bottom of that page you linked 下载项目。下载它或查看 Plunkr 并将您所拥有的与他们所拥有的进行比较以查看问题所在可能是一个好主意（假设他们的工作正常）
这是基于意见的，正如我在 quora 的回答中指出的那样，Angular 团队承担了太多的工作，并且没有很好地更新文档。我在尝试学习他们的教程时遇到了同样的问题，所以我放弃了，只学习了其他书籍和 API 文档。
@RudolfOlah 大约是 2017 年 10 月中旬，以当时的最新版本为准。

标签： javascript angular

【解决方案1】：

我认为 OP 已经解决了他的问题，但对于遇到此问题的任何人，我们开始吧。

我遇到了和你一样的问题。我检查了对restart the editor or restart the server .i.e 的回答。 ng serve。两者都不适合我。

我对 VS 代码比较陌生（顺便说一句，这是我正在使用的 IDE）和 angular2，因此 this 教程（教程：英雄之旅）。

问题是我创建了 mock-heroes.ts，用源代码填充它，但由于 Windows 崩溃而没有保存内容。 VS 代码必须具有保留未保存源的缓存版本。当我再次打开 IDE 时，文件完好无损，但没有意识到文件图标上有一个蓝点。悬停在上面时，它显示“1 个未保存的文件”。因此mock-heroes.ts 不是模块的问题，该文件存在并且我可以导入它，但它不包含保存的代码，因此它还不是模块。

CTRL + S ... 已排序。 ng server 它运行起来就像一个魅力。

在历史上最大的手掌之后的片刻，我正在写这个答案。

【讨论】：

【解决方案2】：

除了@JamieBarker 所说的之外，当您在编辑器之外添加一个新类或继续运行您的 Angular cli ng serve 时，就会发生上述错误。

实际上您的编辑器或“ng serve”无法找到新创建的文件。

我在使用ng serve --open 时遇到了同样的错误。我停止了它并使用了ng serve，它被修复了。

【讨论】：

【解决方案3】：

我遇到了同样的问题，但是当您保存 mock-heroes.ts 和 heroes.components.ts 后问题就解决了。如果问题没有解决，则停止 ng serve 并重新启动它。

【讨论】：