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

In my case I had forgotten to save changes to the file 'app/hero.ts', after saving and restarting ng serve the issue was resolved.

Answer 2

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

Answer 3

add this before exporting class

@Injectable({
  providedIn: 'root'
})  

Answer 4

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.

Answer 5

Restarting my ng serve process worked for me

Answer 6

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 ;-)