261

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!

4
  • 11
    restarting console helped me Aug 15, 2020 at 18:26
  • Dup component incorrectly nested in multiple modules. Asked for better error descrip: github.com/angular/angular/issues/40616 Jan 28, 2021 at 16:04
  • 2
    This error also occurs when you miss @ before NgModule
    – Efe
    Mar 30, 2021 at 13:17
  • Pablo, point 1. in Venkata Thrivedi's answer below is the only thing required for this specific error message. unfortunately, the package.json, angular.json, and tsconfig.app.json files you posted actually don't matter in this case... Apr 13, 2022 at 12:44

35 Answers 35

352

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

Look at jejakhacker.com

10
  • 21
    I've been finding out that many times restarting the server or restarting IDE will do the trick :D Feb 26, 2020 at 23:40
  • Hi, I'm still getting the issues with the mono-repo workspace.Where it has root node_modules. Jun 3, 2020 at 7:25
  • 9
    You would need to restart VSCode in order for Angular Language Service to recompile the packages. Jun 2, 2021 at 7:16
  • 7
    Actually angular should provide a hint in the error log itself to restart and check!
    – Jatinder
    Jul 1, 2021 at 9:15
  • 3
    Thank you! Simple but worked for me. VS Code Reload: F1 > Type Reload Window > Press Return Thanks again. Dec 29, 2021 at 18:01
164

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

declarations: [
  AppComponent,
],
imports: [
  BrowserModule,
  AppRoutingModule,
  SomeComponent <-----------wrong
],
1
  • 1
    This! Also check other declaration properties too, such as providers, etc. Make sure they all have correct and valid values set.
    – Jonathan
    Sep 30, 2020 at 7:00
81

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

7
  • 15
    Fellow Bonehead here - MatCheckboxModule - Your answer was useful, thanks
    – Caribou
    Sep 27, 2020 at 15:43
  • Training material is great, but you really learn by doing :)
    – dev'd
    Feb 2, 2021 at 12:09
  • The same thing happened for me with HttpClient. Updated HttpClient to HttpClientModule in my app.module.ts and the issue was resolved.
    – Brendan
    Mar 23, 2021 at 2:57
  • 2
    I signed in for the the first time in years just to say Thanks ;) Apr 1, 2021 at 8:25
  • sigh...MatAutocompleteModule - I don't know how long it would have taken me to realize without your comment, thank you.
    – BLogan
    Apr 15, 2021 at 22:15
29

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.

1
  • 1
    Totally agree with this. In my case with ng12, I switched from using ngx-clipboard to the now "built-into-angular" @angular/cdk/clipboard. I imported ClipboardModule correctly, but the "Clipboard" export is actually a service. Removing it from Exports and placing in Providers did the trick for me. Oct 21, 2021 at 21:06
19

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
4
  • 70
    Folks, disabling Ivy which will soon to be the ONLY rendering engine for Angular is not the way to go. I understand if you're needing to push to prod ASAP because of reasons but you should diagnose and find out what is really causing your issue. Aug 19, 2020 at 19:16
  • 6
    @AaronJordan I think the issue is moreso that Ivy is not production-ready, contrary to what the Angular team says. A production-ready upgrade should not have near the amount of bugs that Ivy has. Also, View Engine is not going away anytime soon for backwards-compatibility reasons (same reason why Angular library builds still happen in View Engine, not Ivy) Oct 14, 2020 at 21:57
  • @u Ah...I don't see Ivy has a lot of bugs. Where is your reference?
    – maxisam
    Mar 1, 2021 at 18:18
  • In most instances @AaronJordan is right. However I've found that disabling Ivy is more stable when developing local libraries and hot loading into another project. Related answer: https://stackoverflow.com/a/61527483/212700
    – leepowers
    Aug 10, 2021 at 23:24
15

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

1
  • saved me a bunch of wasted time thank you. should have known this by now.
    – d0rf47
    Feb 8, 2021 at 16:06
14

This works for me:

1) Stop the ng server

2) Reinstall your package

npm install your-package-name

3) Run all again

ng serve
8

try to clear cache

  1. npm cache clean --force
  2. npm install
1
  • 3
    It seems like correct command is npm cache clean --force
    – egvo
    Feb 17, 2022 at 18:38
8

My mistake: I was missing the Module part, I wrote

import { MatPaginator } from '@angular/material/paginator';

instead of

import { MatPaginatorModule } from '@angular/material/paginator';

in my module.

6

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';
1
  • 2
    Just my one cent. The file had imports as import { MatFormField, MatHint, MatLabel } from '@angular/material/form-field';. It should be instead import { MatFormFieldModule } from '@angular/material/form-field'; When imports are wrong, then also the same error occurs. It took me 1hr. I almost was about to disable Ivy. I was using Angular version 11
    – Raj
    Mar 3, 2021 at 5:49
6

In my case I got this solved by setting "strictTemplates" back to false in tsconfig.json

{
  "compilerOptions": {
    // ...
  },
  "angularCompilerOptions": {
    "strictTemplates": false
  }
}

I had previously set this to true to prevent a VStudio pop-up from showing:

enter image description here

2
  • 1
    Worked for me thanks, despite being in pre-ivy version: angular8
    – Samih A
    Apr 12, 2021 at 8:23
  • For me this just hid the error and made it compile but the website didn't work, it didn't render the component.
    – OZZIE
    Jan 7, 2022 at 13:34
6

For me I was working under Ubuntu

The error disappeared if I use sudo with ng

sudo ng build
sudo ng serve

A better solution is to grant the current user the needed permissions on the current folder using the following command:

sudo chown -R `whoami` ./

Doing so will let you run ng commands without sudo.

3
  • this answer helped me to resolve my issues
    – Gopi P
    Jan 21, 2021 at 16:43
  • It is likely you have installed something as root. It maybe time to check out the project again using the user account and building it there. Issue with using root is you may install a bad npm package by accident and end up with a hacked system. see answer by Shankar Ganesh for how to reset security.
    – KenF
    Feb 15, 2021 at 22:21
  • works as same here project created using root Mar 12, 2021 at 0:47
4

This works for me

  1. Stop the ng server(ctrl+c)

  2. Run Again

    npm start / ng serve --open
    
3

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+

3

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
2
  • 1
    Wow you've saved my day! My Angular code was in Docker and all the files belonged to "root". Angular couldn't access a file, and gave me this cryptic error!
    – kolypto
    Feb 23, 2021 at 22:37
  • @kolypto How would you change the ownership to the local user? I am using windows, and in the "properties>security>advanced" of the app folder did not find any such option. Please guide.
    – Pinka
    Jan 31, 2022 at 1:41
3

I was importing mat-list. My mistake was using the following:

import { MatList } from "@angular/material/list";
@NgModule({
  exports: [
    MatList,
  ]
})

I forgot to append 'Module' suffix to the import and export declaration. The following fixed the problem:

import { MatListModule } from "@angular/material/list";
@NgModule({
  exports: [        
    MatListModule, // <-- Add 'Module' suffix here!
  ]
})
2

What fixed it for me was matching the version of angular material & adapter to the lowest version of another angular module. Then reinstalled & re-ran.

    "@angular-devkit/schematics": "^10.1.2",
    "@angular/animations": "^10.1.2",
    "@angular/cdk": "^10.2.1",
    "@angular/common": "10.1.2",
    "@angular/compiler": "10.1.2",
    "@angular/core": "10.1.2",
    "@angular/forms": "10.1.2",
    "@angular/localize": "^10.1.2",
    "@angular/material": "^10.2.1",
    "@angular/material-moment-adapter": "^10.2.1",
    "@angular/platform-browser": "10.1.2",
    "@angular/platform-browser-dynamic": "10.1.2",
    "@angular/router": "10.1.2",

As you can see my cdk was 10.2.1, and my material was also 10.2.1. I saw the lowest version used was 10.1.2, so i changed the versions:

    "@angular/material": "^10.1.2", (was 10.2.1)
    "@angular/material-moment-adapter": "^10.1.2", (was 10.2.1)

to 10.1.2, ran "npm install" and then "ng serve", and it compiled successfully.

2

I faced issue on Angular 12 and the issue is my colleague defined the component in page module and as well as the common module we use globally in project.

Removed from globally file module, issue resolved.

On My Case

0
1

Work for me

angular.json

"aot": false
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

1

It also happens when you import some mat components which is not used anywhere in your components.

  • if you have all mat components imported in you app.module.ts you have imported some mat components and you have not used any of the components in imports and exports arrays in app.module.ts means no issues no errors will throw works fine.

  • if you create feature module for that let say by ng g m material this will create material.module.ts filename.

  • now we have to copy all mat import statements to newly created feature module before copying keep in mind is any import statements grayed out or not(some indication IDE shows this name is not used). if grayed out means you have to remove those names then copy and paste it to MaterialModule imports and exports array. that's solve.

1
  1. App.Module.ts

    You can solve the error by adding the injectables in Provider not imports or declarations.

  2. Inside Service.ts

    Add @injectable over the class

ex:

@Injectable()
 export class WebApiService {   }

even if you give space might not work

ex:

@Injectable()


export class WebApiService {    }
1

If you run npm install or yarn install with root account and run ng serve with a non-root account, you will encounter this issue.

Workaround: start server with root account as well

1

I was trying to add a custom pipe to my shared module and I've added it in import and export. That's why it caused this issue.

I solved this issue by adding my custom pipe into declarations:[], exports:[] and providers:[].

I solved this issue by following code :

@NgModule({

 declarations: [
   myCustomPipe,
 ],

 exports: [
   myCustomPipe,
 ],

 providers: [
  myCustomPipe,
 ]

})
1

I don't know why but the only way I could solve it was to:

  1. Import the module instead of the component
  2. Match the folder name /my-component-y/ with MyComponentY.ts, I had /component-y/ and MyComponentY.ts

The root components are lazy loaded since it's for a mulitsite if that makes any difference.

Best solution is to use React/Next.js instead though of this old hacky framework.

1

Nothing of all the anwers here helped on my side.

Short version: Remove the ".angular" (caching) folder in project root!

Long version: The NG6002 error came up in nearly every NgModule. It was consequential error because one of my directive (class CustomRouterLink extends RouterLink {}) had invalid injection tokens.

I fixed the injection token mistake, but angular still compained 100+ of the NG6002 errors. After hours of trying out all findings in the www, I just removed the ".angular" (caching) folder in project root, restartet the angular dev server.. TADAAA everything working again.

1
  • I don't know what good the .angular folder does - my angular doesn't build faster or anything and I've not noticed any improvement in behavior (other than symlinks seem to be more robust). I'd say the decision to create this angular cache causes a lot more problems than it fixed and, at least, should be made optional. Oct 24, 2023 at 15:30
0

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

1
  • its not related to cache, The issue is NgModule and providing in a wrong collection.
    – Sgryt
    Jun 11, 2022 at 14:25
0

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

1
  • 3
    setting an aot to false, it is likely problem will occur in production. This is not a good solution.
    – KenF
    Feb 15, 2021 at 22:18
0

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

In my case the problem was calling .forRoot() from some child modules that were meant to be re-used.

Not the answer you're looking for? Browse other questions tagged or ask your own question.