Add support for Angular 9 with Ivy

[govindthakur25]

Describe the bug which template:

• MaterialDesignFrameworkModule — Material Design
• [ ] Bootstrap3FrameworkModule — Bootstrap 3
• [ ] Bootstrap4FrameworkModule — Bootstrap 4
• [ ] NoFrameworkModule — plain HTML
• [ ] Other (please specify below)

A clear and concise description of what the bug is.

To Reproduce Objective: I want to test this lib with my application which is developed using Angular 9 (Ivy enabled). Apparently, the support is not there yet, so, I took the pull from build/angular9 branch and tried to build it locally. And then I installed the angular 9 supported package from my local build but seeing these errors. Steps to reproduce the behavior:

1. Take the pull from build/angular9 branch, set it up locally and build it using the npm scripts provided in the package.json. I specifically used npm run prestart.
2. Go inside the dist/@ajsf/material folder, and then run npm pack command to create the package for @ajsf/material. Similarly for @ajsf/core as well.
3. Install the packages @ajsf/core and @ajsf/material locally in your application, like npm install ~/your_project_root/dist/@ajsf/material/ajsf-material-0.1.3.tgz and npm install ~/your_project_root/dist/@ajsf/core/ajsf-core-0.1.3.tgz.
4. Setup @ajsf/material as given here.
5. Try to serve your application

Expected behavior It should let the application successfully built with Ivy support.

Screenshots NA

Desktop (please complete the following information):

• OS: Ubuntu 20.04.1 LTS
• Browser: Not Applicable, getting the error while compiling the app
• Version: NA

Log output covering before the error and any error statements

> ng serve --proxy-config proxy.conf.json

Warning: Entry point '@ajsf/core' contains deep imports into '/home/govind/EdgeView/git/ev-ng/node_modules/lodash/cloneDeep', '/home/govind/EdgeView/git/ev-ng/node_modules/lodash/isEqual', '/home/govind/EdgeView/git/ev-ng/node_modules/ajv/lib/refs/json-schema-draft-06.json', '/home/govind/EdgeView/git/ev-ng/node_modules/lodash/filter', '/home/govind/EdgeView/git/ev-ng/node_modules/lodash/map', '/home/govind/EdgeView/git/ev-ng/node_modules/lodash/uniqueId'. This is probably not a problem, but may cause the compilation of entry points to be out of order.
Warning: Entry point '@ajsf/material' contains deep imports into '/home/govind/EdgeView/git/ev-ng/node_modules/lodash/cloneDeep'. This is probably not a problem, but may cause the compilation of entry points to be out of order.
Compiling @ajsf/core : es2015 as esm2015
Compiling @ajsf/material : es2015 as esm2015

Error

ERROR in Failed to compile entry-point @ajsf/material (es2015 as esm2015) due to compilation errors:
node_modules/@angular/flex-layout/typings/module.d.ts:16:22 - error NG6002: Appears in the NgModule.imports of MaterialDesignFrameworkModule, but could not be resolved to an NgModule class.

This likely means that the library (@angular/flex-layout) which declares FlexLayoutModule 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.

16 export declare class FlexLayoutModule {
                        ~~~~~~~~~~~~~~~~

Additional context It was also giving errors related to @angular/flex-layout, so I added it as a bundleDependencies in the @ajsf/material package.json file, like this:

"bundleDependencies": [
    "@angular/flex-layout"
  ]

[govindthakur25]

After doing a little more research I could find a work-around but without Ivy enabled. I added the below config in the package.json of @ajsf/material:

"workspaces": {
    "packages": [
      "packages/*"
    ],
    "nohoist": [
      "**/@angular/*",
      "**/@angular/*/**"
    ]
  },
  "bundleDependencies": [
    "@angular/flex-layout"
  ],

Now, I am able to use this package in my Angular 9 app but with ivy disabled. I still can't figure out the right solution for this, please provide some pointers.

[hamzahamidi]

Unfortunately at the current time we can't apparently publish Angular libraries using Ivy see https://github.com/ng-packagr/ng-packagr/issues/1467

[govindthakur25]

Okay, I see. You cannot enable Ivy in your lib, but it should support Ivy enabled applications. I was getting one error very specific to Ivy while building your lib from the angular9 dev branch. And I could only get rid of it when I disabled Ivy in my own application. I only want to be able to use your lib without disabling Ivy in my application. Is that possible or it has the same limitation as ng-packagr?

ERROR in Failed to compile entry-point @ajsf/material (es2015 as esm2015) due to compilation errors:
node_modules/@angular/flex-layout/typings/module.d.ts:16:22 - error NG6002: Appears in the NgModule.imports of MaterialDesignFrameworkModule, but could not be resolved to an NgModule class.

This likely means that the library (@angular/flex-layout) which declares FlexLayoutModule 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.

16 export declare class FlexLayoutModule {
                        ~~~~~~~~~~~~~~~~

[hamzahamidi]

From the logs you posted FlexLayoutModule isn't compatible with Ivy https://github.com/angular/flex-layout Also from the angular official docs:

For now, it is not recommended to publish Ivy libraries to NPM because Ivy generated code is not backward compatible with View Engine, so apps using View Engine will not be able to consume them. Furthermore, the internal Ivy instructions are not yet stable, which can potentially break consumers using a different Angular version from the one used to build the library.

When a published library is used in an Ivy app, the Angular CLI will automatically convert it to Ivy using a tool known as the Angular compatibility compiler (ngcc). Thus, publishing your libraries using the View Engine compiler ensures that they can be transparently consumed by both View Engine and Ivy apps.

More information here

[govindthakur25]

Okay, I get it completely now. Thank you for your prompt reply.