Angular 10 Libraries and IVY/ngcc Compatibility

Question

I have a library that needs to be distributed via npm. The recommendation for Angular 10 still seems to be that such libraries should be compiled with IVY disabled but that the Angular CLI will ensure that the library is still compatible with an app that has IVY enabled.

With my library, if I build it with IVY it works as expected. Yet if I disable IVY when building, when I come to import the library I get the following error:

ERROR in node_modules/@me/my-module/lib/my-module.module.d.ts:1:22 - error NG6002: Appears in the NgModule.imports of AppModule, but could not be resolved to an NgModule class.

This likely means that the library (@me/my-module) which declares MeMYModule has not been processed correctly by ngcc, or is not compatible with Angular Ivy. Check if a newer version of the library is available, and update if so. Also consider checking with the library's authors to see if the library is expected to be compatible with Ivy.

Am I missing something? I have found lots of similar problems, but none of the solutions seem to work.

Gottfried

I removed node_modules and ran npm install. – Gymno

Answer 1

I'd faced similar problem few days ago. I solved it by adding the following script inside my package.json file.

"scripts": {
    "postinstall": "ngcc"
  }

Jason

you can even npm run postinstall to try to figure if it will work. – Patriciate

Facing the same problem I tried enabling Ivy without success of building my library. De we add postinstall to library's package or to app's ? I tried both and still have the same error :/ – Manor

This does not work with Angular 16 I get: ALERT: As of Angular 16, "ngcc" is no longer required and not invoked during CLI builds. You are seeing this message because the current operation invoked the "ngcc" command directly. This "ngcc" invocation can be safely removed. A common reason for this is invoking "ngcc" from a "postinstall" hook in package.json. In Angular 17, this command will be removed. Remove this and any other invocations to prevent errors in later versions. – Kano

Answer 2

I'd faced similar problem few days ago, integrating fluuterwave into an Angular 16 project, this error was shown

flutterwave.module.d.ts(1, 22): This likely means that the library (flutterwave-angular-v3) which declares FlutterwaveModule is not compatible with Angular Ivy. Check if a newer version of the library is available, and update if so. Also consider checking with the library's authors to see if the library is expected to be compatible with Ivy.

I solved it by adding the following script inside my package.json file.

    {
      ...
      "scripts": {
        ...
        "postinstall": "npx --package @angular/[email protected] --yes ngcc",
        ...
       },
       ...
    }

Camire

This solution worked for me as I had the exact case of flutterwave-v3 in Angular 16. Don't forget to re-run "npm install" after adding the postinstall script. – Determinative

Were you able to get over the null injection error at the point when the Flutterwave service actually gets called in your Angular 16 application. Your fix ensures that my app doesn't break at build time but it still does because the Flutterwave service is not "Ivy compatible". ERROR NullInjectorError: R3InjectorError(AppModule)[Flutterwave -> Flutterwave]: NullInjectorError: No provider for Flutterwave! – Determinative