0

I built an Angular 10 library and used it via a direct import (file:dist/my-lib).

Now I wanted to publish my lib to a private npm repository. To get that working, I changed my tsconfig.lib.json and disabled ivy:

"angularCompilerOptions": {
    ...,
    "enableIvy": false
  }

All that worked, and I was able to build and publish my library. Most of the library code is working as expected, but in one component (internally used inside the library) there is a function:

export class MyComponent {
  public hasChanges(): boolean {
    return ...;
  }
}

I do invoke this function on an injected @ViewChild('myCustomComponent') myComponent: MyComponent;, which throws an error that hasChanges is not a function.

I do not really know what one would need to figure out the problem. Any thoughts what could be the problem with disabling ivy?

Everything works fine when I build the library without disabling ivy.

Manuel Kroiß
  • 85
  • 8
  • Im not sure if Ivy is the problem here, but the declaration should really be `@ViewChild('myCustomComponent') myComponent: MyComponent | undefined;` ViewChilds are only defined after `ngAfterViewInit`, calling them prior to that can potentially be dangerous. –  Mar 03 '21 at 14:17
  • I just tried to remove the call to the `hasChanges` function and found out that `MyComponent` is completely omited. It does not even include any HTML from that component in the DOM. I think it has at least something to do with ivy, because when I remove `enableIvy: false` from `tsconfig.lib.json`, everything works – Manuel Kroiß Mar 03 '21 at 14:27
  • you need to declare it, and maybe even add it as entryComponent, depending on the usage, if you disable ivy. – Marian Theisen Mar 03 '21 at 14:44
  • Adding it to entry components is something that I partly understand. But I only build my lib without ivy, since it is not allowed to push ivy-built libraries to a registry. But in the project where I use the library, ivy is enabled. Shouldn't it work with this setting? – Manuel Kroiß Mar 03 '21 at 15:02
  • Does adding {static: true} to your ViewChild definition help: @ViewChild('myCustomComponent', {static:true}) myComponent: MyComponent – afriedman111 Mar 03 '21 at 15:19
  • Already tried that. Did not help. – Manuel Kroiß Mar 04 '21 at 09:23

1 Answers1

1

The solution was using Angular >= 11 and the partial compilation mode.

In tsconfig.lib.json:

"angularCompilerOptions": {
    "compilationMode": "partial"
}

See here for further explanation

Manuel Kroiß
  • 85
  • 8