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, w

Answer 1

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

Answer 2

This can also occour when using the wrong import (for example 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';

Answer 3

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

Answer 4

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:

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

Answer 5

This works for me:

1) Stop the ng server

2) Reinstall your package

npm install your-package-name

3) Run all again

ng serve

Answer 6

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