File 'app/hero.ts' is not a module error in the console, where to store interfaces files in directory structure with angular2?

问题:

I am doing the angular2 tutorial at this address : https://angular.io/docs/ts/latest/tutorial/toh-pt3.html I have put the hero interface in a single file under the app folder, in the console I have this error:

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. 

If I put my interface file in a hero folder the error disapear, this is not mentioned in the documentation, whats wrong with my import ?

My import directive (at the beguining of the component files) in both app.components.ts and hero-detail.component.ts:

import {Component} from 'angular2/core';  import {Hero} from './hero'; 

Must I replace my import directive by: import {Hero} from './'; or simply put the code in an hero folder ?

Thank for your answers.

回答1:

Try Restarting the editor in which you are writing the code(VS code or Sublime). Compile and Run it again. I have done the same and it worked

This happens when you add a new class outside from your editor or keep running your angular cli 'ng serve'. Actually your editor or 'ng serve' not able to find the newly created files.

回答2:

I got the same error in the same tutorial because I had forgot the export keyword for the interface.

回答3:

probably you forgot to add "Export" in the class definition.

-->

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

Also, try with

export {Hero}  

at the bottom of your hero.ts class, and finally, check capital letter file name and class name.

回答4:

Restarting my ng serve process worked for me

回答5:

This error is caused by failer of the ng serve serve to automatically pick up a newly added file. To fix this, simply restart your server.

Though closing the reopening the text editor or IDE solves this problem, many people do not want to go through all of the stress of reopening the project. To Fix this without closing the text editor...

In terminal where the server is running,

• Press ctrl+C to stop the server then,
• Start the server again: ng serve

That should work.

回答6:

As I experienced whenever I add a new file to my project, I got to stop and restarting the ng server.

回答7:

The tutorial has you putting all components and the interface file in the same directory hence the relative import './hero' if you want to move it elsewhere you need to change this.

Edit: The code may still work but the compiler will complain because you are attempting an import from an incorrect location. I'd simply change the import based on your structure. For example:

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

I would simply change the import to import {Hero} from '../hero'.

回答8:

restart ng serve

I had the same issue. In order to search for the error, I selected the error and accidentally did a CTRL+C (meaning to copy), which terminated ng serve. On restarting ng serve, the error disappeared :). Sometimes typos and fat fingers help ;-)

回答9:

The error is because you have not saved the files after creating them.

Try saving all the file by clicking "Save All" on the Editor.

You can see the number of files which are not saved by looking below the "File" menu shown using blue color.

回答10:

I ran into the same issue in VSC. Did restarted the editor and started the application again. It worked fine.

回答11:

I found that not only did I have to restart Visual Studio Code but the node server process as well before I could get a good compile.

回答12:

I faced same issue.

I restarted my server and it works fine. Seems like a bug.

回答13:

I was facing same issue, tried restarting my server, reopening editor but computer restart did the magic.

P.S: I was facing issue on a windows machine and issue occurred when I moved module into a new folder.

回答14:

I had a similar issue. I wrote hero instead of Hero

import the following:

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

回答15:

Editor issue. When you create new files that not using Angular CLI, make sure you go to File > Save All (VS Code) to let the Editor aware of your new changes. Then run "ng serve --open" again. It solved mine. Hope it helps

回答16:

My Resolution,

In my case, I have created a model file and kept it blank,

so when I imported it to other model, It gives me error. so write the definition when you create a model typescript file.

Thanks, Pradip Thakre

回答17:

Sometimes this error occurs when the .ts file is not saved. So make sure all files in the project are saved otherwise try to restart the editor.

文章来源: File 'app/hero.ts' is not a module error in the console, where to store interfaces files in directory structure with angular2?