Getting 'Cannot read property 'ɵmod' of undefined' when importing custom module

user_263559 0
Viewed 753

I've built and published a custom components library, kept in Artifactory, to install into my app? I'm getting the following error after I install the library, when the app loads. Like nothing renders, just this error message...

core.js:1139 Uncaught TypeError: Cannot read properties of undefined (reading 'ɵmod') at getNgModuleDef (core.js:1139) at recurse (core.js:25270) at recurse (core.js:25281) at registerNgModuleType (core.js:25266) at new NgModuleFactory$1 (core.js:25380) at compileNgModuleFactory__POST_R3__ (core.js:28993) at PlatformRef.bootstrapModule (core.js:29239) at Module.zUnb (main.ts:11) at webpack_require (bootstrap:79) at Object.0 (main.js:11)

I have seen the stackoverflow stating to "return the module" by adding... but I have no idea what file it needs to be added to.

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

And I have confirmed the proper folders are packaged when the library is built as mentioned in this stackoverflow

Also, this is my import statement, that I feel is wrong. But I get a compile error if I use "@myOrg_amf/amf-library"

import { AmfLibraryModule, MaterialModule } from '@myOrg_amf/amf-library/projects/amf-library/src/public-api';

Thank you for any advice you can give on this.

angular-library angular package javascript
1 Answers

I'm getting the same error and I tried the mentioned solution (i simplified the syntax a bit but just check that you're actually returning the module if you use the curly braces in the then() block:

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

For those who have no idea how to place this, it should go inside the app.routing.module.ts file, or wherever you're setting up your routes:

const routes: Routes = [
  ...
  { path: 'auth', loadChildren: () => import('./auth/auth.module').then((a) => a.AuthModule) },
  ...
];


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

In this way the module will be loaded only when the matching route is active. For more info see https://angular.io/guide/lazy-loading-ngmodules

Anyway, in my case I get always the same error, the only difference is that now it appears when I navigate on that route instead of being displayed as the app starts, meaning that it's thrown when angular tries to load the module.

I tried to point directly to the module in my import url (instead of public-api as it's shown here) but this didn't fix the issue.

Probably I did something odd in my library :/ hope this helped at least for the first doubt

UPDATE: I was calling npm publish from projects/my-project folder (which holds src etc), instead it should be called from dist/my-project. Now the error disappeared.

user_196676910
Related