File 'app/hero.ts' is not a module error in the console, where to store interfaces files in directory structure with angular2?
AngularAngular Problem Overview
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?
Angular Solutions
Solution 1 - Angular
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.
Solution 2 - Angular
I got the same error in the same tutorial because I had forgot the export keyword for the interface.
Solution 3 - Angular
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.
Solution 4 - Angular
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.
Solution 5 - Angular
Restarting my ng serve
process worked for me
Solution 6 - Angular
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.
Solution 7 - Angular
As I experienced whenever I add a new file to my project, I got to stop and restarting the ng server.
Solution 8 - Angular
Don't forget to export your class or interface as well.
export interface Sort {
value: string;
viewValue: string;
}
Solution 9 - Angular
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'
.
Solution 10 - Angular
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.
Solution 11 - Angular
I faced same issue.
I restarted my server and it works fine. Seems like a bug.
Solution 12 - Angular
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.
Solution 13 - Angular
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 ;-)
Solution 14 - Angular
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
Solution 15 - Angular
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.
Solution 16 - Angular
I ran into the same issue in VSC. Did restarted the editor and started the application again. It worked fine.
Solution 17 - Angular
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.
Solution 18 - Angular
I had a similar issue. I wrote hero instead of Hero
import the following:
import { Hero } from '../Hero';
Solution 19 - Angular
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.
Solution 20 - Angular
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.
Solution 21 - Angular
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.
Solution 22 - Angular
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
Solution 23 - Angular
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.
Solution 24 - Angular
change
import{observable} from 'rxjs/observable';
to
import{observable} from 'rxjs';
make sure you have save .TS file before compiling.
Solution 25 - Angular
add this before exporting class
@Injectable({
providedIn: 'root'
})
Solution 26 - Angular
My problem was that I was running ng build --prod
with a blank environment.prod.ts
file