文件'app / hero.ts'不是控制台中的模块错误，在哪里用angular2在目录结构中存储接口文件？

我正在angular2以下地址执行教程：https : //angular.io/docs/ts/latest/tutorial/toh-pt3.html我已将hero接口放在文件app夹下的单个文件中，在控制台中出现此错误：

app/app.component.ts(2,20): error TS2306: File 'app/hero.ts' is not a module.
[0] app/hero-detail.component.ts(2,20): error TS2306: File 'app/hero.ts' is not a module.

如果将接口文件放在hero文件夹中，错误消失了，文档中没有提到，导入有什么问题？

我的import指令（在组件文件的beguining）在这两个app.components.ts和hero-detail.component.ts：

import {Component} from 'angular2/core';

import {Hero} from './hero';

我是否必须将导入指令替换为：import {Hero} from './'; 或将代码放在hero文件夹中？

尝试重新启动要在其中编写代码（VS代码或Sublime）的编辑器。编译并再次运行。我做过同样的事情，而且奏效了。

当您从编辑器外部添加新类或继续运行角度倾斜“发球”时，就会发生这种情况。实际上，您的编辑器或“ ng serve”命令可能无法找到新创建的文件。

我在同一教程中遇到了相同的错误，因为我忘记了该接口的export关键字。

可能您忘记在类定义中添加“导出”。

->

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

另外，尝试

export {Hero} 

在hero.ts类的底部，最后检查大写字母文件名和类名。

该错误是因为创建文件后您尚未保存文件。

尝试通过单击编辑器上的“全部保存”来保存所有文件。

通过查看蓝色显示的“文件”菜单下方，可以看到未保存的文件数。

重新启动ng serve过程对我有用

对于人们在stackblitz上遇到相同的错误

您将在IDE的左侧栏中找到“ 依赖关系”选项卡。只需单击其旁边的刷新按钮，您就可以使用了。

正如我每次将新文件添加到项目中所经历的那样，我必须停止并重新启动ng服务器。

本教程将所有组件和接口文件放在同一个目录中，因此，'./hero'如果要将相对移动导入到其他位置，则需要进行相对导入。

编辑：该代码可能仍然可以工作，但是编译器会抱怨，因为您尝试从错误的位置导入。我只是根据您的结构更改导入。例如：

app/
  component1/
    component1.ts
  compnent2/
    component2.ts
  hero.ts

我只是将导入更改为import {Hero} from '../hero'。

此错误是由于服务器ng serve无法自动提取新添加的文件引起的。要解决此问题，只需重新启动服务器即可。

尽管关闭重新打开的文本编辑器或IDE可以解决此问题，但是许多人并不想承受重新打开项目的所有压力。要解决此问题而不关闭文本编辑器...

在服务器运行的终端中，

• 按下ctrl+C以停止服务器，
• 再次启动服务器： ng serve

那应该工作。

我遇到了同样的问题。

我重新启动了服务器，并且工作正常。好像是个错误。

重新开始服务

我遇到过同样的问题。为了搜索错误，我选择了错误并意外地执行了CTRL + C（意味着复制），这终止了ng服务。重新启动ng服务时，错误消失了:)。有时错别字和胖手指会有所帮助;-)

编辑器问题。当创建不使用Angular CLI的新文件时，请确保进入“文件”>“全部保存（VS代码）”，以使编辑器知道您的新更改。然后再次运行“ ng serve --open”。它解决了我的问题。希望能帮助到你

我在VSC中遇到了同样的问题。没有重新启动编辑器并再次启动应用程序。工作正常。

我发现不仅要重新启动Visual Studio Code，还要重新启动节点服务器进程，然后才能进行良好的编译。

我遇到了同样的问题，尝试重新启动服务器，重新打开编辑器，但是计算机重新启动确实神奇了。

PS：我在Windows计算机上遇到问题，并且在将模块移到新文件夹中时发生了问题。

我有一个类似的问题。我写了英雄而不是英雄

导入以下内容：

import { Hero } from '../Hero';

有时，如果未保存.ts文件，则会发生此错误。因此，请确保已保存项目中的所有文件，否则请尝试重新启动编辑器。

打开命令提示符，转到应用程序文件夹，例如 D:\angular-tour-of-heroes\src\app

然后使用以下命令创建一个新文件：

ng generate class hero

这将创建一个hero.ts文件。然后，您可以粘贴导出代码，错误消失了。

您应该保存所有文件。例如html，css，component.ts，模块，模型文件。打开每个文件，然后按ctrl-S。这对我有用

在我的情况下，我忘记保存对文件“ app / hero.ts”的更改，在保存并重新启动ng服务后，问题已解决。

我的决心

就我而言，我创建了一个模型文件并将其保留为空白，

因此，当我将其导入其他模型时，它给了我错误。因此，当您创建模型打字稿文件时，请写下定义。

更改

import{observable} from 'rxjs/observable'; 

至

import{observable} from 'rxjs';

在编译之前，请确保已保存.TS文件。

在导出课程之前添加此内容

@Injectable({
  providedIn: 'root'
})