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

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 the 'ng serve' command may not able to find the newly created files.

Answer 2

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

Answer 3

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'.

Answer 4

change

import{observable} from 'rxjs/observable'; 

to

import{observable} from 'rxjs';

make sure you have save .TS file before compiling.

Answer 5

For people getting the same error on stackblitz

You will find a Dependency tab on the left sidebar of the IDE. Just click the refresh button next to it and you will be good to go.

---

Answer 6

Don't forget to export your class or interface as well.

export interface Sort {
    value: string;
    viewValue: string;
}