error NG6002 Appears in the NgModule imports of AppModule but could not be resolved to an NgModule class

Question

First time using firestore and I m getting this error  It seems to be a problem with Ivy  from my research  I don t have a lot of experience modifying tsconfig app json  which is the direction I ve been pointed to  following other answers  The only thing I was able to modify from the original project was to use Angular Fire 6 instead of 5  which I had done initially to follow a tutorial  Here s package json       quot name quot    quot language quot      quot version quot    quot 0 0 0 quot      quot scripts quot          quot ng quot    quot ng quot        quot start quot    quot ng serve quot        quot build quot    quot ng build quot        quot test quot    quot ng test quot        quot lint quot    quot ng lint quot        quot e2e quot    quot ng e2e quot          quot private quot   true     quot dependencies quot          quot  angular animations quot    quot  9 0 1 quot        quot  angular cdk quot    quot  9 0 0 quot        quot  angular common quot    quot  9 0 1 quot        quot  angular compiler quot    quot  9 0 1 quot        quot  angular core quot    quot  9 0 1 quot        quot  angular fire quot    quot  6 0 0-rc 1 quot        quot  angular flex-layout quot    quot  9 0 0-beta 29 quot        quot  angular forms quot    quot  9 0 1 quot        quot  angular material quot    quot  9 0 0 quot        quot  angular platform-browser quot    quot  9 0 1 quot        quot  angular platform-browser-dynamic quot    quot  9 0 1 quot        quot  angular router quot    quot  9 0 1 quot        quot firebase quot    quot  7 8 2 quot        quot rxjs quot    quot  6 5 4 quot        quot rxjs-compat quot    quot  6 5 4 quot        quot tslib quot    quot  1 10 0 quot        quot zone js quot    quot  0 10 2 quot          quot devDependencies quot          quot  angular-devkit build-angular quot    quot  0 900 2 quot        quot  angular cli quot    quot  9 0 2 quot        quot  angular compiler-cli quot    quot  9 0 1 quot        quot  angular language-service quot    quot  9 0 1 quot        quot  types node quot    quot  12 11 1 quot        quot  types jasmine quot    quot  3 3 8 quot        quot  types jasminewd2 quot    quot  2 0 3 quot        quot codelyzer quot    quot  5 1 2 quot        quot jasmine-core quot    quot  3 4 0 quot        quot jasmine-spec-reporter quot    quot  4 2 1 quot        quot karma quot    quot  4 1 0 quot        quot karma-chrome-launcher quot    quot  2 2 0 quot        quot karma-coverage-istanbul-reporter quot    quot  2 0 1 quot        quot karma-jasmine quot    quot  2 0 1 quot        quot karma-jasmine-html-reporter quot    quot  1 4 0 quot        quot protractor quot    quot  5 4 0 quot        quot ts-node quot    quot  7 0 0 quot        quot tslint quot    quot  5 15 0 quot        quot typescript quot    quot  3 7 5 quot        quot  angular-devkit architect quot    quot  0 900 0-0     0 900 0 quot        quot firebase-tools quot    quot  7 12 1 quot        quot fuzzy quot    quot  0 1 3 quot        quot inquirer quot    quot  6 2 2 quot        quot inquirer-autocomplete-prompt quot    quot  1 0 1 quot         angular json      quot  schema quot    quot   node modules  angular cli lib config schema json quot      quot version quot   1     quot newProjectRoot quot    quot projects quot      quot projects quot          quot language quot            quot projectType quot    quot application quot          quot schematics quot              quot  schematics angular component quot                quot style quot    quot scss quot                            quot root quot    quot  quot          quot sourceRoot quot    quot src quot          quot prefix quot    quot app quot          quot architect quot              quot build quot                quot builder quot    quot  angular-devkit build-angular browser quot              quot options quot                  quot outputPath quot    quot dist language quot                quot index quot    quot src index html quot                quot main quot    quot src main ts quot                quot polyfills quot    quot src polyfills ts quot                quot tsConfig quot    quot tsconfig app json quot                quot aot quot   true               quot assets quot                    quot src favicon ico quot                  quot src assets quot                              quot styles quot                    quot   node modules  angular material prebuilt-themes deeppurple-amber css quot                  quot src styles scss quot                              quot scripts quot                              quot configurations quot                  quot production quot                    quot fileReplacements quot                                          quot replace quot    quot src environments environment ts quot                      quot with quot    quot src environments environment prod ts quot                                                    quot optimization quot   true                 quot outputHashing quot    quot all quot                  quot sourceMap quot   false                 quot extractCss quot   true                 quot namedChunks quot   false                 quot extractLicenses quot   true                 quot vendorChunk quot   false                 quot buildOptimizer quot   true                 quot budgets quot                                          quot type quot    quot initial quot                      quot maximumWarning quot    quot 2mb quot                      quot maximumError quot    quot 5mb quot                                                          quot type quot    quot anyComponentStyle quot                      quot maximumWarning quot    quot 6kb quot                      quot maximumError quot    quot 10kb quot                                                                                  quot serve quot                quot builder quot    quot  angular-devkit build-angular dev-server quot              quot options quot                  quot browserTarget quot    quot language build quot                          quot configurations quot                  quot production quot                    quot browserTarget quot    quot language build production quot                                                quot extract-i18n quot                quot builder quot    quot  angular-devkit build-angular extract-i18n quot              quot options quot                  quot browserTarget quot    quot language build quot                                  quot test quot                quot builder quot    quot  angular-devkit build-angular karma quot              quot options quot                  quot main quot    quot src test ts quot                quot polyfills quot    quot src polyfills ts quot                quot tsConfig quot    quot tsconfig spec json quot                quot karmaConfig quot    quot karma conf js quot                quot assets quot                    quot src favicon ico quot                  quot src assets quot                              quot styles quot                    quot   node modules  angular material prebuilt-themes deeppurple-amber css quot                  quot src styles scss quot                              quot scripts quot                                      quot lint quot                quot builder quot    quot  angular-devkit build-angular tslint quot              quot options quot                  quot tsConfig quot                    quot tsconfig app json quot                  quot tsconfig spec json quot                  quot e2e tsconfig json quot                              quot exclude quot                    quot    node modules    quot                                                quot e2e quot                quot builder quot    quot  angular-devkit build-angular protractor quot              quot options quot                  quot protractorConfig quot    quot e2e protractor conf js quot                quot devServerTarget quot    quot language serve quot                          quot configurations quot                  quot production quot                    quot devServerTarget quot    quot language serve production quot                                                quot deploy quot                quot builder quot    quot  angular fire deploy quot              quot options quot                                      quot defaultProject quot    quot language quot     tsconfig app json      quot extends quot    quot   tsconfig json quot      quot compilerOptions quot          quot outDir quot    quot   out-tsc app quot        quot types quot                  quot files quot          quot src main ts quot        quot src polyfills ts quot          quot include quot          quot src      d ts quot          quot exclude quot          quot src test ts quot        quot src      spec ts quot         Thanks

User · Answer

I had the same problem  I followed these steps  in this exact order  this is VERY important    Create child component in the  quot app module ts quot  Build the application Create parent component Build the application Create HTML archive Build the application  This happens mainly because Angular won t build those modules in the correct order  i e before the HTML  e g My code   x000D   x000D     lt mat-toolbar gt   lt  -- 2 -- gt       lt button mat-icon-button class  example-icon  aria-label  Example icon-button with menu icon  gt         lt mat-icon gt favorite lt  mat-icon gt   lt  -- 1 -- gt       lt  button gt       lt span gt My App lt  span gt       lt span class  example-spacer  gt  lt  span gt       lt button mat-icon-button class  example-icon favorite-icon  aria-label  Example icon-button with heart icon  gt       lt  button gt       lt button mat-icon-button class  example-icon  aria-label  Example icon-button with share icon  gt       lt  button gt     lt  mat-toolbar gt  x000D   x000D   x000D

User · Answer

I got this error when I made the bonehead mistake of importing MatSnackBar instead of MatSnackBarModule in app module ts

User · Answer

This issue will be fixed by adding the postinstall script below in your package json    It will be run after a npm install    scripts         postinstall    ngcc      Post adding the above code  run npm install  This works for me when upgrading to Angular 9

User · Answer

I had this error message because I was trying to import a component in a new module instead of importing the other module where my component was declared  Removing the component import from my new module and importing the other module solved it for me

User · Answer

npm cache clean --force -  cleaning the cache maybe solve the issue

User · Answer

I have faced the same issue in Ubuntu because the Angular app directory was having root permission  Changing the ownership to the local user solved the issue for me    sudo -i   chown -R  lt username gt   lt group gt   lt ANGULAR APP gt    exit    cd  lt ANGULAR APP gt    ng serve

User · Answer

For me I was working under Ubuntu The error disappeared if I use sudo with ng sudo ng build sudo ng serve

User · Answer

This works for me  Stop the ng server ctrl c   Run Again npm start   ng serve --open

User · Answer

This can also occur when using the wrong import  for example when using autoimport   let s take the MatTimePickerModule as an example  This will give an error message that is similar to the one described in the question  import   NgxMatTimepickerModule   from   angular-material-components datetime-picker lib timepicker module    This should instead be import   NgxMatTimepickerModule   from   angular-material-components datetime-picker

User · Answer

I have tested all the answers here but non of them worked for me  So I decided to change angular js file  there is a aot option there which is true  then I altered that to the false and the error vanished    options                  outputPath    dist DateMeUI                index    src index html                main    src main ts                polyfills    src polyfills ts                tsConfig    tsconfig app json                aot   false     here you have to change              assets                    src favicon ico                  src assets                              styles                    src styles css                              scripts                     However  I got that there is  tsconfig app json  which I couldn t find that in my project maybe you have to add this manually   by this file you can set the  enableIvy   false as others mention to it  tsconfig app json

User · Answer

I got this error when I added the service class  I was using Angular 9 Went for several solutions  nothing helped me to resolve this issue  If U tried everything make sure u added ng module reference in core lib inside service  See Img

User · Answer

Restarting your server may not work always  I have got this error when I imported MatFormFieldModule  In app module ts  I have imported MatFormField instead of MatFormFieldModule which lead to this error  Now change it and restart the server  Hope this answer helps you

User · Answer

Fixed it by opting out of Ivy as per documentation    https   angular io guide ivy  Change tsconfig app json to opt out of Ivy    enableIvy   false

User · Answer

I made a mistake by adding a service into imports array instead of providers array   NgModule     imports        MyService    wrong here        providers        MyService    should add here        export class AppModule      Angular says you need to add Injectables into providers array

User · Answer

Just go to your tsconfig app json in your project and remove all from it and copy below code and paste it  It will solve your issue       To learn more about this file see  https   angular io config tsconfig          quot extends quot    quot   tsconfig json quot      quot compilerOptions quot          quot outDir quot    quot   out-tsc app quot        quot types quot                quot files quot          quot src main ts quot        quot src polyfills ts quot          quot include quot          quot src      d ts quot          quot angularCompilerOptions quot          quot enableIvy quot   false

User · Answer

Work for me angular json  quot aot quot   false

User · Answer

Just restarting the server with command npm start did the trick  Thanks all for the suggestions

User · Answer

This error shows when you add component declaration in imports     instead of declarations      e g   declarations      AppComponent     imports      BrowserModule    AppRoutingModule    SomeComponent  lt -----------wrong

User · Answer

i simply change my import from import from   AngularFirestore  from   angular fire firestore   to import   AngularFirestoreModule   from   angular fire firestore   and it s working fine

User · Answer

Try to restart the server and launch it back using npm start

User · Answer

Sometimes when you change update  NgModule in your project  projects get compiled but changes doesn t get reflect  So  restart once to get expected results if you not get it  ng serve

User · Answer

This error occurs so often for me when i kept running ng serve on and trying to import same modules like RouterModule etc  Every time restarting the application works fine for me  ng serve

User · Answer

Restart your server   means stop ng serve and start again like   ng serve    your problem will be solved  when make any changes in your package json then you need to restart your ng server

User · Answer

Your module is not yet loaded by the Angular Server in node ng serve  so restart your server so the server loads the module that you just added in  NgModule app module ts

User · Answer

This works for me   1  Stop the ng server  2  Reinstall your package  npm install your-package-name   3  Run all again  ng serve

[angular] error NG6002: Appears in the NgModule.imports of AppModule, but could not be resolved to an NgModule class

Examples related to angular

Examples related to google-cloud-firestore

Examples related to angularfire