4

I have an Angular 9 app that i'm starting to move some of the components into a dedicated library project, which uses secondary entry points (trying to mimic Angular Material's approach). Everything builds fine if i build both library and app with the Ivy compiler, but if build both with the --prod flag (which causes the library to be built without Ivy), the app build fails with the following error:

Compiling @fabric/components/breadcrumbs : es2015 as esm2015

ERROR in node_modules/@fabric/components/breadcrumbs/fab-breadcrumbs.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 (@fabric/components/breadcrumbs) which declares FabBreadcrumbsModule 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 s
o. Also consider checking with the library's authors to see if the library is expected to be compatible with Ivy.

1 export declare class FabBreadcrumbsModule {
                       ~~~~~~~~~~~~~~~~~~~~

I tried updating to the latest version (9.0.2 -> 9.1.0), but it's still doing the same thing. I tried recreating this with a brand new super simple mono-repo project, but in that simple case it works fine. I compared the tsconfig and angular.json config files between my app and the simple working app, but they're fairly identical. So i'm kind of stuck. I'm not sure what would be causing this, whether it's on the ng-packagr side, not building the library correctly, or if it's on the angular-build on the app side that's messed up. Any advice would be greatly appreciated!

mfaith
  • 115
  • 3
  • 11
  • Sorry don't know, but curious: why is Ivy disabled in prod build? – Qortex Apr 01 '20 at 19:49
  • @Mic it's disabled for prod library builds, since the expectation is that you'll eventually be publishing it to npm, and the current recommendation from Angular is to publish libraries that have been compiled with the old view engine, so they have wider compatibility. – mfaith Apr 01 '20 at 23:05

1 Answers1

1

With some troubleshooting, and additional info from Pete of the Angular team, i was finally able to figure out the root cause for this. Wanted to update here, in case anyone else encounters the same. The main issue here was that my tsconfig.app.json which is what the ng compiler uses during the ng build run, was nested one level down in the src folder, rather than being at the root of my project. Which meant, it didn't have access to the ./dist folder, where my library was being built. So even though my main tsconfig had the paths correctly defined to point to the ./dist lib folder, the app build couldn't get to it. Unfortunately the error messaging wasn't great, so it took quite a lot of playing around to figure out.

Semi-related issue occurs after upgrading to Angular 10, which changed the tsconfig organization in the project to "Solution Style Layout", renaming the main project tsconfig.json to tsconfig.base.json. This throws off the ngcc compiler, which assumes the base tsconfig is just tsconfig.json. So if you have ngcc setup as a postinstall step, that won't work if you have paths defined in tsconfig.base. The solution for that, is to add a --tsconfig flag to the ngcc postinstall call, pointing it to your tsconfig.base.json.

mfaith
  • 115
  • 3
  • 11