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

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

Simply just return the module.

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

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

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;
    })
},

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

@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

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.

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

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
  ],