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

Question

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

Answer 1

Open command prompt, go to the app folder, e.g. D:\angular-tour-of-heroes\src\app

Then create a new file using the following command:

ng generate class hero

This will create a hero.ts file. Then you can paste the export code, and the error is gone.

Answer 2

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

import the following:

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

Answer 3

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.

Answer 4

You should save all the files. For example html, css, component.ts, module, model files. Open each file and press ctrl-S. This worked for me

Answer 5

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.

Answer 6

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