Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

ngModuleType.ngModuleDef.id is undefined - Angular 8 issue when importing NguCarousel module

When I try and import the NguCarousel module, my app breaks because ngModuleType.ngModuleDef is undefined. If I comment out the import of NguCarousel module, the app works fine. I've tried changing versions of the package but no luck. Currently I have v1.5.5 installed with Angular 8.

Any ideas why this module is missing this property?

js error: enter image description here

package.json

{
  "name": "webapi",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "build:ssr": "ng run WebApi:server:dev",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "8.2.12",
    "@angular/cdk": "^8.2.3",
    "@angular/common": "8.2.12",
    "@angular/compiler": "8.2.12",
    "@angular/core": "8.2.12",
    "@angular/forms": "8.2.12",
    "@angular/material": "^8.2.3",
    "@angular/platform-browser": "8.2.12",
    "@angular/platform-browser-dynamic": "8.2.12",
    "@angular/platform-server": "8.2.12",
    "@angular/router": "8.2.12",
    "@babel/compat-data": "^7.8.0",
    "@fortawesome/angular-fontawesome": "^0.5.0",
    "@fortawesome/fontawesome-svg-core": "^1.2.28",
    "@fortawesome/free-solid-svg-icons": "^5.13.0",
    "@ngu/carousel": "^1.5.5",
    "@nguniversal/module-map-ngfactory-loader": "8.1.1",
    "aspnet-prerendering": "^3.0.1",
    "bootstrap": "^4.4.1",
    "core-js": "^3.3.3",
    "echarts": "^4.9.0",
    "font-awesome": "^4.7.0",
    "hammerjs": "^2.0.8",
    "jquery": "^3.4.1",
    "ngx-echarts": "^5.1.2",
    "ngx-spinner": "^9.0.2",
    "oidc-client": "^1.9.1",
    "popper.js": "^1.16.1",
    "rxjs": "^6.5.3",
    "zone.js": "0.9.1"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^0.803.24",
    "@angular/cli": "^8.3.14",
    "@angular/compiler-cli": "8.2.12",
    "@angular/language-service": "8.2.12",
    "@types/jasmine": "~3.4.4",
    "@types/jasminewd2": "~2.0.8",
    "@types/node": "~12.11.6",
    "codelyzer": "^5.2.0",
    "jasmine-core": "~3.5.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "^4.4.1",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage-istanbul-reporter": "~2.1.0",
    "karma-jasmine": "~2.0.1",
    "karma-jasmine-html-reporter": "^1.4.2",
    "typescript": "3.5.3"
  },
  "resolutions": {
    "@babel/preset-env": "7.5.5"
  },
  "optionalDependencies": {
    "node-sass": "^4.12.0",
    "protractor": "~5.4.2",
    "ts-node": "~8.4.1",
    "tslint": "~5.20.0"
  }
}

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { AccountModule } from './account/account.module';
import { AccountRoutingModule } from './account/account.routing.module';
import { AppComponent } from './app.component';
import { AuthService } from './services/auth.service';
import { NguCarouselModule } from '@ngu/carousel';

@NgModule({
    declarations: [
        AppComponent,
        
    ],
    imports: [
        BrowserModule.withServerTransition({ appId: 'ng-cli-universal' }),
        NguCarouselModule,
        BrowserAnimationsModule,
        AccountModule,
        AccountRoutingModule,       
        RouterModule.forRoot([
            { path: 'unauthorized', component: UnauthorizedComponent },
            { path: '**', redirectTo: '' }
        ])
    ],
    providers: [
        AuthService,
    ],
    bootstrap: [AppComponent]
})
export class AppModule { }

like image 419
roonz11 Avatar asked May 06 '26 03:05

roonz11


1 Answers

I ran to the same error today for the same angular version (v8). it was caused by installing higher version of angular material (v12) when I noticed that I forget to specify the version I uninstall it using npm uninstall command then reinstall the correct version. this when the bug occurred for me.

SOLUTION for my problem

  1. close the vs code
  2. go to project path on file explorer
  3. remove node_modules folder
  4. open the project on vs code again
  5. run command npm i

the node package manager will reinstall all packages with the correct version for you and this should solve the problem.

like image 82
Ayman Ali Avatar answered May 09 '26 05:05

Ayman Ali



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!