angular: App does not compile with Ivy - Angular 9

🐞 Bug report

Command (mark with an `x`)

serve

Is this a regression?

Production app builds with version 8, fails with version 9 and IVY enabled

Description

Everything in this ticket is about/with the experimental Ivy enabled.

🔬 Minimal Reproduction

Sorry unsure what the problem is. Part of the behavior is documented here: https://github.com/swimlane/ngx-datatable/issues/1699#issuecomment-520957242

With AngularCLI 8.3.0-next.1 The error was:

ERROR in node_modules/@swimlane/ngx-datatable/release/datatable.module.d.ts(1,22): error TS-996002: Appears in the NgModule.imports of AdminModule, but could not be resolved to an NgModule class

But after updating, with AngularCLI 9.0.0-next.1 I get a different output I am unable to discern:

🔥 Exception or Error

ERROR in Error: Assertion error: failed to find directive with exportAs: ngForm
    at /Users/byakubchik/Desktop/WIP/angular8/node_modules/@angular/compiler/bundles/compiler.umd.js:28444:31
    at Array.forEach (<anonymous>)
    at DirectiveBinder.visitElementOrTemplate (/Users/byakubchik/Desktop/WIP/angular8/node_modules/@angular/compiler/bundles/compiler.umd.js:28427:29)
    at DirectiveBinder.visitElement (/Users/byakubchik/Desktop/WIP/angular8/node_modules/@angular/compiler/bundles/compiler.umd.js:28401:76)
    at Element.visit (/Users/byakubchik/Desktop/WIP/angular8/node_modules/@angular/compiler/bundles/compiler.umd.js:4132:71)
    at /Users/byakubchik/Desktop/WIP/angular8/node_modules/@angular/compiler/bundles/compiler.umd.js:28473:67
    at Array.forEach (<anonymous>)
    at DirectiveBinder.visitElementOrTemplate (/Users/byakubchik/Desktop/WIP/angular8/node_modules/@angular/compiler/bundles/compiler.umd.js:28473:27)
    at DirectiveBinder.visitElement (/Users/byakubchik/Desktop/WIP/angular8/node_modules/@angular/compiler/bundles/compiler.umd.js:28401:76)
    at Element.visit (/Users/byakubchik/Desktop/WIP/angular8/node_modules/@angular/compiler/bundles/compiler.umd.js:4132:71)
    at /Users/byakubchik/Desktop/WIP/angular8/node_modules/@angular/compiler/bundles/compiler.umd.js:28473:67
    at Array.forEach (<anonymous>)
    at DirectiveBinder.visitElementOrTemplate (/Users/byakubchik/Desktop/WIP/angular8/node_modules/@angular/compiler/bundles/compiler.umd.js:28473:27)
    at DirectiveBinder.visitTemplate (/Users/byakubchik/Desktop/WIP/angular8/node_modules/@angular/compiler/bundles/compiler.umd.js:28402:78)
    at Template.visit (/Users/byakubchik/Desktop/WIP/angular8/node_modules/@angular/compiler/bundles/compiler.umd.js:4150:72)
    at /Users/byakubchik/Desktop/WIP/angular8/node_modules/@angular/compiler/bundles/compiler.umd.js:28473:67

🌍 Your Environment


Angular CLI: 9.0.0-next.2
Node: 12.6.0
OS: darwin x64
Angular: 9.0.0-next.4
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, platform-server
... router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.900.0-next.2
@angular-devkit/build-angular     0.900.0-next.2
@angular-devkit/build-optimizer   0.900.0-next.2
@angular-devkit/build-webpack     0.900.0-next.2
@angular-devkit/core              9.0.0-next.2
@angular-devkit/schematics        9.0.0-next.2
@angular/cli                      9.0.0-next.2
@angular/http                     7.2.15
@ngtools/webpack                  9.0.0-next.2
@nguniversal/express-engine       7.1.1
@schematics/angular               9.0.0-next.2
@schematics/update                0.900.0-next.2
rxjs                              6.5.2
typescript                        3.4.5
webpack                           4.39.3

Anything else relevant? Will be happy to clarify more. The original problem preventing the app from compiling was the inclusion of three libraries

ngx-datatable - https://github.com/swimlane/ngx-datatable/issues/1699#issuecomment-520957242
mydatepicker - https://www.npmjs.com/package/mydatepicker (no new versions since > 1 year ago)
ng2-charts - https://www.npmjs.com/package/ng2-charts (haven’t tried their latest version yet)

🤷‍♂ Tagging @StephenFluin for reference 🙇

About this issue

Original URL
State: closed
Created 5 years ago
Comments: 21 (5 by maintainers)

Most upvoted comments

Confirming that after I updated the 3 libraries in my project, the app compiled with ivy and AOT 🚀

If I’m doing it right, with webpack-bundle-analyzer I get these results:

Angular 7 5.87MB
Angular 9 5.15MB with ivy and AOT enabled (latest versions 9.0.0-next.9)

whyboris on Oct 7, 2019

Thanks so much @whyboris. I’m in London for Angular Connect at the moment so won’t be able to look into it immediately, expect an update during the weekend.

JoostK on Sep 18, 2019

Hi @whyboris,

Thanks so much for putting together this issue! I am looking into ngx-datatable right now, that seems to be compiling correctly for me right now. I’m using 16.0.2 together with Angular bbd4a33 (a commit from today). The compilation failures you’re seeing might be related to the fix being done in #32539, however I can’t know for sure as I don’t have a reproduction available.

Can you share a repro (may be in private) for me to investigate? Alternatively if that’s not possible, do you have a clue on which template is failing compilation? If so, we might be able to come up with a reproduction. Thanks again!

JoostK on Sep 10, 2019

Thank you @JoostK 🙇

I think it’s acceptable for new major releases of Angular to stop supporting outdated versions of libraries.

In my case there were three, each fixed with newer releases:

upgrade mydatepicker to its successor angular-mydatepicker (by the same author!) ✅
upgrade ng2-charts version 1.6.0 to latest 2.3.0 ✅
upgrade ngx-datatable to 16.0.1 ✅

Had we been keeping our library versions up to date at work, we wouldn’t have run into this complicated mess of errors. I hope the time everyone spent working through this and related issues wasn’t wasted time 🙇

This issue can be closed if there’s nothing valuable to work through. Perhaps during Angular 9 release it’s worth making public that some old versions of libraries might not work and some library upgrades might be needed.

❤️

whyboris on Sep 28, 2019

Sorry, I’ve lost a bit track of what the state of this is now, after having diagnosed why mydatepicker did not work. Is this still an issue with the other date library?

JoostK on Sep 26, 2019

I already commented on your other issue (https://github.com/angular/angular/issues/32729), so but I would suggest the same things here, so please see that comment: https://github.com/angular/angular/issues/32729#issuecomment-532407017

I am not using the same third party libraries you are, but I’ve had some of the same errors, such as Appears in the NgModule.imports of AdminModule, but could not be resolved to an NgModule class and Cannot read property 'incrementalState' of null.

The two things I mentioned in the other issue seem to have resolved these errors for me, although I don’t fully understand why.

compeek on Sep 17, 2019

I thought I checked ngForm across our codebase and I thought we had many, but turns out it exists only once! #myForm="ngForm" so when I removed it the app got further in compilation, erring out dozens of times with errors like:

app/dashboard/insights/insights.component.html:71:33 - error TS8002: 'name' is not a valid property of <app-svg-icon>.

<app-svg-icon class="arrow" [name]="'svg-arrow'"></app-svg-icon>

Despite the app-svg-icon component having @Input() name: string; in the component 😕 and

app/dashboard/insights/insights.component.html:19:5 - error TS8002: 'ngClass' is not a valid property of <div>.

[ngClass]="{ noPointer: insights.length === 1 }"

even though ngClass is an acceptable property of an element 🤷‍♂

Errors seem similar to https://github.com/angular/angular/issues/32506

whyboris on Sep 11, 2019