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 ??
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: