3
core.js:27296 Uncaught TypeError: Cannot read properties of undefined (reading 'ngModule')
    at isModuleWithProviders (core.js:27296)
    at expandModuleWithProviders (core.js:27290)
    at Array.map (<anonymous>)
    at Function.get (core.js:26927)
    at getNgModuleDef (core.js:1117)
    at assertNgModuleType (core.js:1296)
    at compileNgModuleFactory__POST_R3__ (core.js:29073)
    at PlatformRef.bootstrapModule (core.js:29324)
    at Module.14431 (main.ts:11)
    at __webpack_require__ (bootstrap:19)

I have a custom library that is consumed by the main project (app). Everything was fine until I updated the project to Angular 12.

I followed the update instructions here, for both the main project and the custom library

There are no compile errors when I serve and no build errors when I build with --prod flag. However, when I try to assess the app locally from the browser I get the above error.

I have tried debugging it. That led me to these solutions, here and here. With those, I was able to trace the error to the modules imported from the custom library. But that's where I'm stuck.

Please, can someone assist with how to fix the error and run the app?

App.module

import { UtilsModule } from '@utils/utils.module';
import { PipesModule } from '@pipes/pipes.module';

...

@NgModule({
    imports: [
        BrowserModule,
    ...
        PipesModule,
        UtilsModule
    ]
})

tsconfig.json

{
"paths": {
      ...
      "@pipes/*": [
        "./node_modules/custom-library/src/pipes/*"
      ],
      "@utils/*": [
        "./node_modules/custom-library/src/utils/*"
      ],
     ...
   }
 ...
 }

package.json

{
 ...
 "dependencies": {
     ...
     "custom-library": "url-to-repository-branch"
     ...
   }
 ...
}

The library was installed with this approach here

Emeka Nwachukwu
  • 41
  • 2
  • 5

1 Answers1

3

After a day of troubleshooting, here is what I have found...

Problem

There are several non-published angular libraries in our project.

During local development, everything was fine. Yet, while deploying into production, the paths defined in tsconfig.json were somehow lost.

Solution

  • Create a build from the libraries npm build [project-library]
  • Create a package from that new folder npm package [path-to-build-library]
  • npm install that library, based on a tgz file:
    • npm i "file:/./tmp/library-to-import.0.0.1.tgz"
  • While importing components from the package, it must be done from the built and installed package, not the source code

This solved my problem.

Cafn
  • 137
  • 1
  • 8
  • 26
  • please explain precisely about your suggestion, what library should we change? In my case, angular-CLI don't let generate new components and modules and shows an error message telling `Cannot read properties of undefined (reading 'kind')` please give a reason for this because there isn't any explanation in the error in terminal (only shows that message) :/ – Damika Feb 23 '22 at 02:34
  • My comment was related to libraries created by ourselves (and not 3rd party libraries). In your case, I would believe it's a problem with angular package. Try to reinstall it – Cafn Sep 22 '22 at 10:45
  • This is a non-solution because we should not have to publish libraries to use them. The question is why some libraries cannot be imported yet others can without issue. – ktamlyn Oct 30 '22 at 15:31
  • Nowhere in my answer to the original post I refer that we should publish the libraries. The answer is specific for non-published libraries – Cafn Oct 31 '22 at 10:52