Question

我试图关注Angular官方文档：

但由于此错误无法继续：

编译失败。

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.

我的代码与教程中的代码完全相同，这真是令人沮丧的官方文档，让我甚至不想学习角度:(任何人都知道如何克服它？

模拟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>

Answer 1

我认为OP已经解决了他的问题，但是对于任何遇到过这个问题的人来说，我们都去了。

我和你的一样有同样的问题。我检查了restart the editor or restart the server所述的答案。 ng serve。两者都不适合我。

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

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

CTRL + S ...排序。 ng server它就像魅力一样。

历史上最大的脸掌之后的时刻我正在写这个答案。

Answer 2

除了@JamieBarker所说的，当您从编辑器外部添加新课程或继续运行角色cli ng serve时，会发生上述错误。

实际上你的编辑或'ng serve'无法找到新创建的文件。

使用ng serve --open时出现同样的错误。我停下来并使用ng serve并修复了它。

Answer 3

我遇到了同样的问题，但是当您保存 mock-heroes.ts 和 heroes.components.ts 时问题会解决。如果问题无法解决，请停止 ng serve 并重新启动它。

＆＃34;模拟heroes.ts＆＃39;不是一个模块＆＃34;来自Angular官方文档的错误

3 个答案: