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 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 disappear, this is not mentioned in the documentation, what's 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 a hero folder?

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

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 4

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 5

Restarting my ng serve process worked for me

Answer 6

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 7

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

Answer 8

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 9

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 10

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

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

Answer 11

I faced same issue.

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

Answer 12

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

Answer 13

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 14

In my case I was accusing that the '*service.ts' is not a module.

To solve it I just added the service within providers in the module.

Answer 15

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

Answer 16

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.

Answer 17

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.

Answer 18

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

import the following:

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

Answer 19

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.

Answer 20

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 21

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 22

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 23

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.

Answer 24

change

import{observable} from 'rxjs/observable'; 

to

import{observable} from 'rxjs';

make sure you have save .TS file before compiling.

Answer 25

add this before exporting class

@Injectable({
  providedIn: 'root'
})  

Answer 26

My problem was that I was running ng build --prod with a blank environment.prod.ts file