error NG6002: Appears in the NgModule.imports of AppModule, but could not be resolved to an NgModule class
AngularGoogle Cloud-FirestoreAngularfireAngular Problem Overview
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!
Angular Solutions
Solution 1 - Angular
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
Solution 2 - Angular
This error shows when you add component declaration in imports: []
instead of declarations: []
, e.g:
declarations: [
AppComponent,
],
imports: [
BrowserModule,
AppRoutingModule,
SomeComponent <-----------wrong
],
Solution 3 - Angular
I got this error when I made the bonehead mistake of importing MatSnackBar
instead of MatSnackBarModule
in app.module.ts
.
Solution 4 - Angular
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.
Solution 5 - Angular
Fixed it by opting out of Ivy as per documentation.
Change tsconfig.app.json to opt out of Ivy.
"enableIvy": false
Solution 6 - Angular
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
Solution 7 - Angular
This works for me:
-
Stop the ng server
-
Reinstall your package
npm install your-package-name
-
Run all again
ng serve
Solution 8 - Angular
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';
Solution 9 - Angular
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.
Solution 10 - Angular
try to clear cache
npm cache clean --force
npm install
Solution 11 - Angular
This works for me
-
Stop the ng server(ctrl+c)
-
Run Again
npm start / ng serve --open
Solution 12 - Angular
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:
Solution 13 - Angular
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
Solution 14 - Angular
My mistake: I wrote
import { MatPaginator } from '@angular/material/paginator';
instead of
import { MatPaginatorModule } from '@angular/material/paginator';
in my module.
Solution 15 - Angular
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+
Solution 16 - Angular
Work for me
angular.json
"aot": false
Solution 17 - Angular
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.
Solution 18 - Angular
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,
]
})
Solution 19 - Angular
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
Solution 20 - Angular
I don't know why but the only way I could solve it was to:
- Import the module instead of the component
- 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.
Solution 21 - Angular
npm cache clean --force
-> cleaning the cache maybe solve the issue.
Solution 22 - Angular
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
Solution 23 - Angular
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
Solution 24 - Angular
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 inapp.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 creatematerial.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.
Solution 25 - Angular
-
App.Module.ts
You can solve the error by adding the injectables in Provider not imports or declarations.
-
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 { }
Solution 26 - Angular
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
Solution 27 - Angular
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,
]
})
Solution 28 - Angular
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
}
}
Solution 29 - Angular
In my case the problem was calling .forRoot()
from some child modules that were meant to be re-used.
Solution 30 - Angular
I got this error while making a shared directive. Now Initially it got into declarations array of the app module (by default after I ran command with cli).
I had it into shared module declarations array
and exports array
. Now as soon as I removed it from app.module.ts
file the issue got resolved.
The issue was it was declared inside 2 modules (shared and app.module). Removed from the app.module and voila!
Solution 31 - Angular
In my case, the problem was with the latest node. I was dockerizing the Angular app and using the latest node version like FROM node:latest as build
To make it work use Angular supported node versions like FROM node:14.17.4
Solution 32 - Angular
it can be occurs when you import a module that you already installed, but one ore more of its dependencies are missing