Reputation: 2375

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 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?

Upvotes: 168

Answers (30)

Sebastian Gomez

Reputation: 704

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.

Upvotes: 44

Fritz

Reputation: 411

Try to put export before your interface:

export interface myModel {
  firstName: string,
  lastName: string
}

Upvotes: 1

Manish NewProjects

Reputation: 21

Remember to do "Save All" from the IDE menu. I had missed this and spent way too much time trying to figure out what was going on

Upvotes: 1

Mr.Curious

Reputation: 292

Save your foo.component.ts file and everything should work fine. Most of the answers here are telling you to close editor. When u close editor , all unsaved changes automatically save and hence it starts working the next time u load your project into editor :-)

Upvotes: 0

Dlyx

Reputation: 97

In my case I have created my.ts files from the terminal. Automatically the encoding was set to UTF-16. The Angular compiler can not work with UTF-16 files (only tested this on Windows).

After I changed the encoding to UTF-8 everything worked fine again.

Upvotes: 0

Rodrigo João Bertotti

Reputation: 5501

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

Upvotes: 0

Julio Cesar Brito Gomes

Reputation: 810

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.

Upvotes: 1

ONE_FE

Reputation: 1006

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

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

Upvotes: 3

Pan Markosian

Reputation: 101

add this before exporting class

@Injectable({
  providedIn: 'root'
})

Upvotes: 0

sayed muzammil

Reputation: 17

change

import{observable} from 'rxjs/observable';

import{observable} from 'rxjs';

make sure you have save .TS file before compiling.

Upvotes: 0

Pradip Thakre

Reputation: 1

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.

Upvotes: 0

ajitkumar

Reputation: 4722

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.

Upvotes: 469

Abdullah Mohammad Motiullah

Reputation: 12592

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.

Upvotes: 7

tmndungu

Reputation: 358

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.

Upvotes: 0

Abdul Mutaal

Reputation: 1

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

Upvotes: 0

Ankit Mishra

Reputation: 199

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.

Upvotes: 0

babidi

Reputation: 506

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.

Upvotes: 0

bRiJeSh

Reputation: 810

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.

Upvotes: 50

Hung Vu

Reputation: 5934

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

Upvotes: 1

Gero

Reputation: 13563

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

import the following:

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

Upvotes: 0

kishore

Reputation: 86

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

Upvotes: 1

Hector

Reputation: 141

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

Upvotes: 3

Pila

Reputation: 5852

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.

Upvotes: 3

Andrea Gherardi

Reputation: 826

Restarting my ng serve process worked for me

Upvotes: 16

Api

Reputation: 1841

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.

Upvotes: 1

Rahul

Reputation: 5844

I faced same issue.

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

Upvotes: 1

Phred Menyhert

Reputation: 2460

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.

Upvotes: 0

B_sadagopan

Reputation: 23

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

Upvotes: 0

Rasmus Rummel

Reputation: 689

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

Upvotes: 54

Zyzle

Reputation: 2280

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

Upvotes: 2

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

Answers (30)

Related Questions

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