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

User · Answer

change   import observable  from  rxjs observable      to  import observable  from  rxjs     make sure you have save  TS file before compiling

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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  -

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

I had a similar issue  I wrote hero instead of Hero  import the following   import   Hero   from     Hero

User · Answer

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

User · Answer

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

User · Answer

I faced same issue   I restarted my server and it works fine  Seems like a bug

User · Answer

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

User · Answer

Restarting my ng serve process worked for me

User · Answer

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

User · Answer

Don t forget to export your class or interface as well  export interface Sort       value  string      viewValue  string

User · Answer

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

User · Answer

add this before exporting class  Injectable     providedIn   root

User · Answer

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

User · Answer

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

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

Examples related to angular