Getting 'Cannot read property 'ɵmod' of undefined' when importing custom module [Angular 11]

Question

I'm trying to make a custom module that holds all my UI components, you can found it here: dawere-uic

It compiles and it works like a charm with the storybook I have on it, every UI component is working. The thing is when I try to use it on my main project I'm getting this error:

Uncaught TypeError: Cannot read property 'ɵmod' of undefined
  at getNgModuleDef (core.js:1117)
  at recurse (core.js:25171)
  at recurse (core.js:25182)
  at registerNgModuleType (core.js:25167)
  at new NgModuleFactory$1 (core.js:25281)
  at compileNgModuleFactory__POST_R3__ (core.js:28915)
  at PlatformRef.bootstrapModule (core.js:29161)
  at Module.zUnb (main.ts:11)
  at __webpack_require__ (bootstrap:79)
  at Object.0 (main.js:11)

It happens as soon as I import it in the app.module. Can anyone tell me what I'm doing wrong? I think it's worth mentioning though that I'm new to Angular.

Answer 1

Simply just return the module.

 {
    path: 'auth',
    loadChildren: () =>
      import('./auth/auth.module')
        .then((a) => {
          return a.AuthModule;
        });
  },

Answer 2

I got the same error but eventually found out that my lazy load script was wrong, that was what I had:

path: 'modulePath', loadChildren: () => import ('./exemple-module/exemple-module.module').then (m => { m.exemple-module })

This is what it should have been:

path: 'modulePath', loadChildren: () => import ('./exemple-module/exemple-module.module').then (m => m.exemple-module)

I did not return the module in the arrow function. Not sure if this helps, but this is the problem I had and how I solved it

Answer 3

Copy from Github:https://github.com/angular/angular/issues/36510#issuecomment-626455153

This can occur when the chunk load error is caught in the router, preventing this error: main.js:21895 Error: Uncaught (in promise): ChunkLoadError: Loading chunk module-name failed.

This can be achieved by doing something like this in router with lazy loaded module:

loadChildren: () => import('module/path').then(m => m.myModule).catch( err => console.log('Oh no!', err) )

• this helps to better see the root error cause

Answer 4

I was doing it this way

{
 path: 'doctor',
 loadChildren: () => 
   import('./doctor/doctor.module')
   .then((m) => {m.DoctorModule;})
}

which worked for me in a previous project though didn't work this time. Now I have added return in "then", and am getting the expected results

{
  path: 'doctor',
  loadChildren: () =>
    import('./doctor/doctor.module')
    .then((m) => {
      return m.DoctorModule;
    })
},

Answer 5

Same error here, im my case i changed the import declaration at my custom module: Before:

`import { BaseChartModule, SortModule } from '@pure-components';`

Changed to:

import { BaseChartModule } from '../base-chart/base-chart.module';

I will investigate why this happens, but worked fine for me, i hope that helpful

Answer 6

@NgModule({
  imports: [RouterModule.forRoot(routes, {
    // initialNavigation: 'enabled',
    scrollPositionRestoration: 'top'
  })],
  exports: [RouterModule]
})
export class AppRoutingModule { }

If u use Angular Universal and serve angular repo with "ng serve" then add to comment initialNavigation, it works for me

Answer 7

To complete the list of answers why this error might occur, please see this question and answer, too.

Im summary the reason for this problem is an incomplete or wrongly uploaded package in your main repository.

In my case for example, the esm2015 and fesm2015 folder had been missing.

Answer 8

ok, i am responding to this question just incase if anyone is on this thread and getting the error mentioned in question using Angular NRWL / Nx and have created component library, trying to use that library outside mono-repo workspace

The reason it is happening is, by default the library being created is NOT PUBLISHABLE, i did that mistake. Once the package is published in dist folder it should have these folders bundles, esm2015, fesm2015 and lib. if you do not see these folders, that means your library is not publishable.

if you have already created your library and you want to make it publishable you need to make following changes in your angular.json file.

        <your-lib> --> architect --> build --> builder 
    change value from : @nrwl/angular:ng-packagr-lite to : @nrwl/angular:ng-packagr

Rebuild your library and check your dist folder, if you see your package having these folders bundles, esm2015, fesm2015 and lib, that means your package is now publishable. Specify .npmrc file if you are publishing your package to your own package repo, do npm publish and install it in your target application. it should work.

For details please read:

https://nx.dev/structure/buildable-and-publishable-libraries and

https://angular.io/guide/angular-package-format

Answer 9

Most likely there's something wrong in the module but is hidden as an inner exception. If you run npm run dev:ssr, you should be able to see the error. In my case, it was because i declared my AppRoutingModule like this.

export const appRoutingModule = RouterModule.forRoot(routes);

Which I changed to

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

export class AppRoutingModule {}

and import it in app.module.ts like this

@NgModule({
  imports: [
    AppRoutingModule,
    ....other imports
  ],