angularangular-templateangular-library

Angular : unable to load component from library : Cannot read properties of null (reading '11')


Under my Angular app

I'm trying to load a component which i'm getting from a local angular library

My component (from library) looks like this :

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'lib-ada-headband-lib',
  templateUrl: './ada-headband-lib.component.html',
  styleUrls: ['./ada-headband-lib.component.scss']
})
export class AdaHeadbandLibComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {
  }

}

its view html looks like this :

<span>
  ada-headband-lib works!
</span>

Under my principal Angular project

I'm getting this from the library by importing the library in the app.module as a module

and then , i'm putting is under my app.component.html like this :

  <section>
    <lib-ada-headband-lib></lib-ada-headband-lib>
  </section>

But it fails to load throwing this error :

core.js:6479 ERROR TypeError: Cannot read properties of null (reading '11')
    at Object.Jv (core.js:14869:1)
    at template (ada-headband-lib.component.ts:8:14)
    at bc (core.js:9599:1)
    at id (core.js:9402:1)
    at Za (core.js:10683:1)
    at core.js:9267:1
    at id (core.js:9427:1)
    at L0.createEmbeddedView (core.js:23026:1)
    at F0.createEmbeddedView (core.js:23157:1)
    at Fn._updateView (common.js:3463:1)

Sinc it seems to not be significant , how may i adjust it ??


Solution

  • I already had preserveSymLinks in my angular.json, but this error didn't go away.

    What fixed it was adding this path my tsconfig.json:

    "paths": {
      "@angular/*": ["./node_modules/@angular/*"],
      ...
    },
    

    Basically when running with the local Ivy library, you have two instances of Ivy and you need to tell your app which node_modules Angular to use.

    A more in-depth explanation of the problem can be found here:

    https://medium.com/@joosep.parts/create-an-angular-14-library-use-it-locally-when-developing-and-publish-the-package-to-npm-689ca2efdea8