App does not compile with Ivy - Angular 9

@StephenFluin

🐞 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:
swimlane/ngx-datatable#1699 (comment)

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 - ERROR in There is no format with import statements in 'C:/ANGULAR/project-angular/node_modules/@swimlane/ngx-datatable' entry-point swimlane/ngx-datatable#1699 (comment)
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 🙇

I am getting very inconsistent behavior, with the latest versions (as of now) of angular and ngx-datatable v16.0.0 I get this error:

An unhandled exception occurred: Cannot destructure property `createHash` of 'undefined' or 'null'.
See "/private/var/folders/32/pqw73fv945dcd6n_g619n7f8c_tzhw/T/ng-qSFBT3/angular-errors.log" for further details.

Above .log file:

[error] TypeError: Cannot destructure property `createHash` of 'undefined' or 'null'.
    at Object.<anonymous> (/Users/byakubchik/Desktop/WIP/angular8/node_modules/mini-css-extract-plugin/dist/index.js:22:9)
    at Module._compile (internal/modules/cjs/loader.js:776:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:787:10)
    at Module.load (internal/modules/cjs/loader.js:643:32)
    at Function.Module._load (internal/modules/cjs/loader.js:556:12)
    at Module.require (internal/modules/cjs/loader.js:683:19)
    at require (internal/modules/cjs/helpers.js:16:16)
    at Object.<anonymous> (/Users/byakubchik/Desktop/WIP/angular8/node_modules/mini-css-extract-plugin/dist/cjs.js:3:18)
    at Module._compile (internal/modules/cjs/loader.js:776:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:787:10)
    at Module.load (internal/modules/cjs/loader.js:643:32)
    at Function.Module._load (internal/modules/cjs/loader.js:556:12)
    at Module.require (internal/modules/cjs/loader.js:683:19)
    at require (internal/modules/cjs/helpers.js:16:16)
    at Object.<anonymous> (/Users/byakubchik/Desktop/WIP/angular8/node_modules/@angular-devkit/build-angular/src/angular-cli-files/models/webpack-configs/styles.js:14:30)
    at Module._compile (internal/modules/cjs/loader.js:776:30)

I'll try. What's puzzling are errors like 'ngClass' is not a valid property of <span>. 😖

I found this StackOverflow question that suggests I need BrowserModule and CommonModule in the right places -- but I have those 😅

Updated to the newest versions as of now (one version up from before) and the output is more-readable, all one-liners. The first one is likely the culprit that cascades to the rest:

    ERROR in node_modules/@angular/router/router.d.ts(2408,22): error TS-996002: Appears in the NgModule.imports of AppRoutingModule, but could not be resolved to an NgModule class
    node_modules/@angular/router/router.d.ts(2408,22): error TS-996003: Appears in the NgModule.exports of AppRoutingModule, but could not be resolved to an NgModule, Component, Directive, or Pipe class
    node_modules/@angular/forms/forms.d.ts(2688,22): error TS-996002: Appears in the NgModule.imports of SharedModule, but could not be resolved to an NgModule class

Seems identical to: #30972

I updated to TypeScript 3.5.1 (and @types/node 12.7.5 just in case) and the app proceeded to build (with 3 small TS errors about boolean isn't assignable to never and the like) ...
But the Chrome console now shows this:

ERROR Error: Uncaught (in promise): Error: Angular JIT compilation failed: '@angular/compiler' not loaded!
  - JIT compilation is discouraged for production use-cases! Consider AOT mode instead.
  - Did you bootstrap using '@angular/platform-browser-dynamic' or '@angular/platform-server'?
  - Alternatively provide the compiler with 'import "@angular/compiler";' before bootstrapping.
Error: Angular JIT compilation failed: '@angular/compiler' not loaded!
  - JIT compilation is discouraged for production use-cases! Consider AOT mode instead.
  - Did you bootstrap using '@angular/platform-browser-dynamic' or '@angular/platform-server'?
  - Alternatively provide the compiler with 'import "@angular/compiler";' before bootstrapping.

I added // @ts-ignore above the 3 lines, and ran npm start again only to get the old error output, a wall of errors like this:

    Error occurs in the template of component InsightsComponent.
app/dashboard/insights/insights.component.html:79:33 - error TS8002: 'name' is not a valid property of <app-svg-icon>.

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

🤷‍♂ inconsistent behavior when running the app the first time (after rm -rf node_modules && npm install && npm start vs npm start after I ran it once) 🤷‍♂

I did rm - rf again and got only 2 errors in compilation before a wall of things like 'ngClass' is not a valid property of <div>:

ERROR in node_modules/mydatepicker/dist/my-date-picker.module.d.ts(1,22): error TS-996002: Appears in the NgModule.imports of ComposeModule, but could not be resolved to an NgModule class
    node_modules/ng2-charts/charts/charts.d.ts(53,22): error TS-996002: Appears in the NgModule.imports of DashboardModule, but could not be resolved to an NgModule class

Perhaps these two repositories will need to release a new version to fix the problem?

mydatepicker(I'm on latest and the library hasn't gotten any new versions in 1 year), and
ng2-charts

I wondered if tsconfig.json needed to have different values:

    "lib": [
      "es2016",
      "dom"
    ],
    "module": "es2015",
    "target": "es6",

I used the most current @angular/cli@next to generate a new project; it contained these values:

    "module": "esnext",
    "target": "es2015",
    "lib": [
      "es2018",
      "dom"
    ]

Updating the failing project to these did not make a difference 🙆‍♂

@JoostK

@JoostK minimal reproduction: #32729 -- dealing with the trouble-causing mydatepicker library

thank you for your time 🙇

I already commented on your other issue (#32729), so but I would suggest the same things here, so please see that comment: #32729 (comment)

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.

@JoostK

@JoostK I created another minimal reproduction of the error, this time with the trouble-causing ng2-charts library: #32748

@whyboris

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.

Please no rush 👌at work we don't intend to upgrade to Angular 9 until at least a few months after its release.

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

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.

❤️

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)

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}

Navigation Menu

Repository navigation

App does not compile with Ivy - Angular 9 #32466

🐞 Bug report

Command (mark with an `x`)

Is this a regression?

Description

🔬 Minimal Reproduction

🔥 Exception or Error

🌍 Your Environment

9 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

App does not compile with Ivy - Angular 9 #32466

Description

🐞 Bug report

Command (mark with an x)

Is this a regression?

Description

🔬 Minimal Reproduction

🔥 Exception or Error

🌍 Your Environment

Activity

whyboris commented on Sep 5, 2019

9 remaining items

whyboris commented on Sep 11, 2019

whyboris commented on Sep 12, 2019

whyboris commented on Sep 12, 2019

whyboris commented on Sep 12, 2019

whyboris commented on Sep 17, 2019

compeek commented on Sep 17, 2019

whyboris commented on Sep 18, 2019

JoostK commented on Sep 18, 2019

whyboris commented on Sep 18, 2019

JoostK commented on Sep 26, 2019

whyboris commented on Sep 28, 2019

whyboris commented on Oct 7, 2019

angular-automatic-lock-bot commented on Nov 7, 2019

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions

Command (mark with an `x`)