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

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:

{
  "name": "language",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~9.0.1",
    "@angular/cdk": "^9.0.0",
    "@angular/common": "~9.0.1",
    "@angular/compiler": "~9.0.1",
    "@angular/core": "~9.0.1",
    "@angular/fire": "^6.0.0-rc.1",
    "@angular/flex-layout": "^9.0.0-beta.29",
    "@angular/forms": "~9.0.1",
    "@angular/material": "^9.0.0",
    "@angular/platform-browser": "~9.0.1",
    "@angular/platform-browser-dynamic": "~9.0.1",
    "@angular/router": "~9.0.1",
    "firebase": "^7.8.2",
    "rxjs": "~6.5.4",
    "rxjs-compat": "^6.5.4",
    "tslib": "^1.10.0",
    "zone.js": "~0.10.2"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.900.2",
    "@angular/cli": "~9.0.2",
    "@angular/compiler-cli": "~9.0.1",
    "@angular/language-service": "~9.0.1",
    "@types/node": "^12.11.1",
    "@types/jasmine": "~3.3.8",
    "@types/jasminewd2": "~2.0.3",
    "codelyzer": "^5.1.2",
    "jasmine-core": "~3.4.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.1.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~2.0.1",
    "karma-jasmine-html-reporter": "^1.4.0",
    "protractor": "~5.4.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.15.0",
    "typescript": "~3.7.5",
    "@angular-devkit/architect": "^0.900.0-0 || ^0.900.0",
    "firebase-tools": "^7.12.1",
    "fuzzy": "^0.1.3",
    "inquirer": "^6.2.2",
    "inquirer-autocomplete-prompt": "^1.0.1"
  }
}

angular.json

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "language": {
      "projectType": "application",
      "schematics": {
        "@schematics/angular:component": {
          "style": "scss"
        }
      },
      "root": "",
      "sourceRoot": "src",
      "prefix": "app",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/language",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.app.json",
            "aot": true,
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "./node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css",
              "src/styles.scss"
            ],
            "scripts": []
          },
          "configurations": {
            "production": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "2mb",
                  "maximumError": "5mb"
                },
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "6kb",
                  "maximumError": "10kb"
                }
              ]
            }
          }
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "language:build"
          },
          "configurations": {
            "production": {
              "browserTarget": "language:build:production"
            }
          }
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "language:build"
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.spec.json",
            "karmaConfig": "karma.conf.js",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "./node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css",
              "src/styles.scss"
            ],
            "scripts": []
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": [
              "tsconfig.app.json",
              "tsconfig.spec.json",
              "e2e/tsconfig.json"
            ],
            "exclude": [
              "**/node_modules/**"
            ]
          }
        },
        "e2e": {
          "builder": "@angular-devkit/build-angular:protractor",
          "options": {
            "protractorConfig": "e2e/protractor.conf.js",
            "devServerTarget": "language:serve"
          },
          "configurations": {
            "production": {
              "devServerTarget": "language:serve:production"
            }
          }
        },
        "deploy": {
          "builder": "@angular/fire:deploy",
          "options": {}
        }
      }
    }
  },
  "defaultProject": "language"
}

tsconfig.app.json

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "outDir": "./out-tsc/app",
    "types": [],
  
  },
  "files": [
    "src/main.ts",
    "src/polyfills.ts"
  ],
  "include": [
    "src/**/*.d.ts"
  ],
  "exclude": [
    "src/test.ts",
    "src/**/*.spec.ts"
  ]
}

Thanks!

This question is related to angular google-cloud-firestore angularfire

The answer is


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.


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 <username>:<group> <ANGULAR_APP>
$ exit 
$ cd <ANGULAR_APP>
$ ng serve

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


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

Work for me

angular.json

"aot": false

This works for me

  1. Stop the ng server(ctrl+c)

  2. Run Again

    npm start / ng serve --open
    

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


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


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


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


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. */
{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "outDir": "./out-tsc/app",
    "types": [],
  },

  "files": [
    "src/main.ts",
    "src/polyfills.ts"
  ],
  "include": [
    "src/**/*.d.ts"
  ],
  "angularCompilerOptions": {
    "enableIvy": false
  }
}

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


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


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+


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


This error shows when you add component declaration in imports: [] instead of declarations: [], e.g:

declarations: [
  AppComponent,
],
imports: [
  BrowserModule,
  AppRoutingModule,
  SomeComponent <-----------wrong
],

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


I had the same problem. I followed these steps (in this exact order, this is VERY important):

  1. Create child component in the "app.module.ts"
  2. Build the application
  3. Create parent component
  4. Build the application
  5. Create HTML archive
  6. 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_
  <mat-toolbar> <!-- 2 -->
    <button mat-icon-button class="example-icon" aria-label="Example icon-button with menu icon">
      <mat-icon>favorite</mat-icon> <!-- 1 -->
    </button>
    <span>My App</span>
    <span class="example-spacer"></span>
    <button mat-icon-button class="example-icon favorite-icon" aria-label="Example icon-button with heart icon">
    </button>
    <button mat-icon-button class="example-icon" aria-label="Example icon-button with share icon">
    </button>
  </mat-toolbar>
_x000D_
_x000D_
_x000D_


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


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.


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.


For me I was working under Ubuntu

The error disappeared if I use sudo with ng

sudo ng build
sudo ng serve

This works for me:

1) Stop the ng server

2) Reinstall your package

npm install your-package-name

3) Run all again

ng serve

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


Examples related to angular

error NG6002: Appears in the NgModule.imports of AppModule, but could not be resolved to an NgModule class error TS1086: An accessor cannot be declared in an ambient context in Angular 9 TS1086: An accessor cannot be declared in ambient context @angular/material/index.d.ts' is not a module Why powershell does not run Angular commands? error: This is probably not a problem with npm. There is likely additional logging output above Angular @ViewChild() error: Expected 2 arguments, but got 1 Schema validation failed with the following errors: Data path ".builders['app-shell']" should have required property 'class' Access blocked by CORS policy: Response to preflight request doesn't pass access control check origin 'http://localhost:4200' has been blocked by CORS policy in Angular7

Examples related to google-cloud-firestore

error NG6002: Appears in the NgModule.imports of AppModule, but could not be resolved to an NgModule class How can I solve the error 'TS2532: Object is possibly 'undefined'? Getting all documents from one collection in Firestore NullInjectorError: No provider for AngularFirestore Firestore Getting documents id from collection How to update an "array of objects" with Firestore? firestore: PERMISSION_DENIED: Missing or insufficient permissions Cloud Firestore collection count

Examples related to angularfire

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