4

I am trying to create an angular library project but I am getting this error in the console

Uncaught TypeError: Cannot read property 'id' of undefined
    at registerNgModuleType (core.js:34470)
    at core.js:34488
    at Array.forEach (<anonymous>)
    at registerNgModuleType (core.js:34484)
    at new NgModuleFactory$1 (core.js:34651)
    at compileNgModuleFactory__POST_R3__ (core.js:40286)
    at PlatformRef.bootstrapModule (core.js:40609)
    at Module../src/main.ts (main.ts:11)
    at __webpack_require__ (bootstrap:79)
    at Object.0 (main.ts:12)

I have created a new angular project with ng new --enable-ivy then added a library with ng g library my-lib. My library has a secondary endpoint with a module (below) so the import would be import { MyLibModule } from 'my-lib/secondary';

@NgModule({
  imports: [
    CommonModule
  ],
  declarations: [
    MyLibDirective
  ],
  exports: [
    MyLibDirective
  ]
})
export class MyLibModule {
  public static forRoot(): ModuleWithProviders {
    return {
      ngModule: MyLibModule,
      providers: []
    };
  }
}

I build this using ng build my-lib which all builds fine, and I am using link to include the library in the demo app, in the dist folder for the library I run yarn link and in the root demo app folder I run yarn link my-lib, then include the module in the imports of the AppModule

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { MyLibModule } from 'my-lib/secondary';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    MyLibModule.forRoot()
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

However when I run yarn start or ng serve everything builds fine but I get the above error in the console, debugging this in the browser it would appear that the ngModuleDef property in my library module does not exist, does anyone know why this happens?

NOTE: This is not a problem if I turn Ivy off but with ng9 coming soon this is not really a viable solution and I would like to know what I have done wrong (if anything) with the library

Output from ng version

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/


Angular CLI: 8.3.21
Node: 12.12.0
OS: darwin x64
Angular: 8.2.14
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router

Package                            Version
------------------------------------------------------------
@angular-devkit/architect          0.803.21
@angular-devkit/build-angular      0.803.21
@angular-devkit/build-ng-packagr   0.803.21
@angular-devkit/build-optimizer    0.803.21
@angular-devkit/build-webpack      0.803.21
@angular-devkit/core               8.3.21
@angular-devkit/schematics         8.3.21
@angular/cli                       8.3.21
@ngtools/webpack                   8.3.21
@schematics/angular                8.3.21
@schematics/update                 0.803.21
ng-packagr                         5.7.1
rxjs                               6.5.4
typescript                         3.5.3
webpack                            4.39.2
Neil Stevens
  • 3,534
  • 6
  • 42
  • 71
  • What version of Angular? – Reactgular Jan 02 '20 at 14:10
  • @NeilStevens i don't know where the error comes from, but angular advises not to generate/publish an ivy library yet [read here](https://next.angular.io/guide/ivy#maintaining-library-compatibility). To maintain backwards compatibility – Poul Kruijt Jan 02 '20 at 14:14
  • @Reactgular update question – Neil Stevens Jan 02 '20 at 14:16
  • @PierreDuc I am not generating an ivy library I am using the View Engine compiler for the library, `ngcc` gets used on the library when I build/serve the demo app – Neil Stevens Jan 02 '20 at 14:19
  • @NeilStevens ah alright, I get it now. Mm, feels like something goes wrong when importing a src library like that. What happens if you use the relative path while importing it? Like `../../projects/my-lib/lib/src/my-lib.module`? Or what happens if you change the return type of the forRoot() with `ModuleWithProviders` – Poul Kruijt Jan 02 '20 at 14:23
  • @PierreDuc changing the return type made no difference, importing directly from the source works but that kinda defeats the purpose of a library – Neil Stevens Jan 02 '20 at 14:29
  • @NeilStevens Obviously :) but at least we're closer to the answer now. Can you share the paths in tsconfig.json? And you are saying it does run the ngcc command on your library, right? And no errors or warnings coming from that? – Poul Kruijt Jan 02 '20 at 14:33
  • Also, you are using opt-in stuff though. With the beta and rc version from angular 9, a lot of fixes have been done in both the angular core and the cli. So I can imagine you are just running into one of the bugs they've fixed. Is it possible for you to update to angular 9 already? – Poul Kruijt Jan 02 '20 at 14:34
  • @PierreDuc I am not using `paths` from tsconfig, I have a library on npm which I have installed on a brand new project with ivy enabled, then using `yarn link` on the library – Neil Stevens Jan 02 '20 at 14:36
  • Not possible to upgrade the main project to ng9 yet but I will try with the demo app to see if that resolves this problem – Neil Stevens Jan 02 '20 at 14:37
  • @NeilStevens Mm, the angular cli should create paths automatically in your tsconfig.json pointing to the dist lib. I don't think you should be using yarn link. About the other thing, more people have this [issue](https://github.com/angular/angular/issues/31314) and they advice to update to angular 9 – Poul Kruijt Jan 02 '20 at 14:38
  • 99% of everything I do these days is in an Angular library. I've avoid Ivy like the plague, because it constantly gave me problems with libraries. Even updates to Angular 8 that bring forward support for Ivy have broken my libraries. I really hope Angular 9 isn't going to be a huge breaking update, because Ivy looks very promising and I've seen some cool stuff done with it. Like support for custom decorators on bindings. There is more going on there then just performance improvements. Just my 2 cents. – Reactgular Jan 02 '20 at 14:53
  • @PierreDuc I had seen that issue but dismissed it as I was not using the browser animation module but `ng update @angular/cli --next` has resolved this problem, the issue is I cannot upgrade my project yet but would like to get the benefits of Ivy – Neil Stevens Jan 02 '20 at 15:16
  • @NeilStevens try adding `"preserveSymlinks": true` in `architect.build.options` of `angular.json` in your application that uses angular package. Had similar issue (although different error message) when linking angular package in ivy enabled v8 app (it was working fine with ivy disabled). – Pavel Gurecki Jan 14 '20 at 11:39

1 Answers1

0
  1. npm uninstall -g @angular/cli
  2. npm install -g @angular/cli@8.3.19 --check your project CLI version 3.ng_Modules delete from the local folder
  3. npm install
Mohammed Rafi
  • 1
  • 2