error NG6002: Appears in the NgModule.imports of AppModule, but itself has errors

Question

I am having angular 12 in my local and building project which runs fine without any error.

My local setup:

Angular CLI: 12.0.5  
Node: 12.16.3  
Package Manager: npm 6.14.4  
OS: win32 x64  
Angular: 12.0.5

But while building my project on the linux server it is giving this error with nothing much to work with.

Server setup:

Angular CLI: 12.0.5  
Node: 14.18.1  
Package Manager: npm 6.14.15  
OS: linux x64  
Angular: 12.0.5

Error: src/app/app-routing.module.ts:34:14 - error NG6002: Appears in the NgModule.imports of AppModule, but itself has errors  
34 export class AppRoutingModule { }

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
import { HeaderComponent } from './header/header.component';
import { FooterComponent } from './footer/footer.component';
import { NotifyFormComponent } from './notify-form/notify-form.component';
import { LoginComponent } from './login/login.component';

@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
    HeaderComponent,
    FooterComponent,
    NotifyFormComponent,
    LoginComponent
  ],
  imports: [
    AppRoutingModule,
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

app-routing.module.ts

import { LoginComponent } from './login/login.component';
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { NotifyFormComponent } from './notify-form/notify-form.component';
import { HomeComponent } from './home/home.component';

const routes: Routes = [
  {path:'',redirectTo:'/',pathMatch: 'full'},
  {
    path:'', 
    component: HomeComponent,
    children:[
      
    ]
  },
  {
    path:'notify', 
    component: NotifyFormComponent
  },
  {
    path:'login', 
    component: LoginComponent
  }
  // {
  //   path:'**', 
  //   component: HomeComponent
  // }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

tsconfig.json

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true,
    "sourceMap": true,
    "declaration": false,
    "downlevelIteration": true,
    "experimentalDecorators": true,
    "moduleResolution": "node",
    "importHelpers": true,
    "target": "es2017",
    "module": "es2020",
    "lib": [
      "es2018",
      "dom"
    ]
  },
  "angularCompilerOptions": {
    "enableI18nLegacyMessageIdFormat": false,
    "strictInjectionParameters": true,
    "strictInputAccessModifiers": true,
    "strictTemplates": true
  }
}

Please help me if I am doing anything horribly wrong here. It is just a simple project to test with. Thanks a lot in advance.

Privative

Try removing children:[] from routing, is there any other error comes in? When does it come on ng build? – Ferroconcrete

Answer 1

I went on a bit of a research spree and here's an official issue for it https://github.com/angular/angular/issues/35399. Also here's another question for it error NG6002: Appears in the NgModule.imports of AppModule, but could not be resolved to an NgModule class. But I'll go ahead and summarize things I've found anyways.

• For many people it worked simply restarting and rebuilding the project, or doing a full forced npm cache clear and reinstalling node_modules and rebuilding it.

• People have suggested disabling "ivy" in tsconfig works, however it's also been mentioned that while it works it's not the recommended way of fixing it.

• This can apparently also happen if you've added components to imports instead of declarations.

• This can apparently also happen if you've installed some packages as root or if you for some reason don't have permissions on all the packages. Which was fixed with doing a chown on the directory, however the real solution is to install packages correctly in the first place and configuring the npm config so you don't ever install packages with root permissions. So essentially if you installed packages with root and try and run the project as non root, it will give this issue.

• Some people got the error when they added a service to imports instead of providers.

• People also get this error if they name the package incorrectly i.e. SomeComponent instead of SomeComponentModule.

• In your specific case, you've imported the app router before browser module, I have no idea if that could cause an issue but everywhere I've seen the browser module is added before the app, so swap them around if nothing else work and see if that works.

That's about everything I could find.

Canaletto

Thanks @Matriarx for summarising the solution. I tried your list from end, turns out It was due to file permission as i had installed the packages as root. – Privative

@HemantKumar how do we check file permissions in Windows? – Androsphinx

@Androsphinx I am not sure what you are actually looking for, but in Windows, generally to get file permission you can use properties-> Security to get permission details. – Privative

FWIW, it happened to us when we accidentally included a service in a module's exports. – Cygnet

Answer 2

check if the paths mentioned in 'templateUrl' and 'styleUrls' are correct in the components wich are related to this module who has a problem,

@Component({
    selector: 'app-navigation-menu-item',
    templateUrl: './xxx.component.html',
    styleUrls: ['./xxx.component.scss']
})

in my case, this was the bug.

Raab

Answer 3

I fixed the problem with ng serve command .When you change configurations in angular.json file you faces this problem.

Acquah

This did it for me. I just stopped the currently running server and ran ng serve again and now it's working. – Tetrachloride

Answer 4

switchin from angular 11 to 15, started getting multiple "error NG6002: This import contains errors, which may affect components" - on working project

what helped: angular.json

.... "aot": false, "buildOptimizer": false, ...

Forest

Answer 5

In my case, you need to change AOT configuration for your environment in angular.json:

"projects": {
  "YOUR_PROJECT_NAME": {
    "architect": {
      "build": {
        "configurations": {
          "production": {
            // configuration for production
          },
          "development": {
            // configuration for development
            "aot": false
          }
        }
      }
    }
  }
}

Hope this helps.

Biyearly

Answer 6

you have to check whether you import everything needed into the app.module.ts and then check the linux maybe there is any other component you need to add but it should work fine this way

Rendition

Answer 7

Try npm version should be > 8.1.0 and node version should be > v16.13.0

Turnedon

Answer 8

I had this issue when I transferred a project from Windows to Linux.
The paths on the imports for my modules had capital letters and this failed in linux and worked in windows.
For example either of the following will work on Windows:

import { switchMap, tap } from 'rxjs/operators';
import { switchMap, tap } from 'rxjs/Operators';

On Linux only the lower case version will work:

import { switchMap, tap } from 'rxjs/operators';

Delaney

Answer 9

In my case problem was the incompatible version of Nodejs. Run ng version to see if the installed node version is compatible with angular version. If not supported node installed out will be like Node: 16.x.x (Not Supported)

Uninstalling and installing compatible version of node solved the problem.

Goldoni