Skip to content

Angular 8 -> Angular 9 breaks with ng2-charts #32748

Closed

Description

@whyboris

🐞 bug report

Affected Package

ng2-charts https://github.com/valor-software/ng2-charts

Is this a regression?

Angular 8.2.6 works
Angular 9.0.0-next.5 fails

Description

Everything works as expected with 8.2.6
Upgrading to 9.0.0-next.5 fails to build (Ivy disabled, aot enabled)

🔬 Minimal Reproduction

I created a repository: https://github.com/whyboris/angular-ivy-problem-2

It was created with npm install -g @angular/cli@next and ng new angular-ivy-problem-2 which runs.

But simply adding ng2-charts fails compilation; see PR:
https://github.com/whyboris/angular-ivy-problem-2/pull/1/files

It is easy to fix, by simply downgrading from angular 9 to angular 8; see PR:
https://github.com/whyboris/angular-ivy-problem-2/pull/2/files

Another fix is to upgrade from ng2-charts version 1.6.0 to latest (2.3.0), see PR:
https://github.com/whyboris/angular-ivy-problem-2/pull/3/files

🔥 Exception or Error



ERROR in node_modules/ng2-charts/charts/charts.d.ts:53:22 - error TS-996002: Appears in the NgModule.imports of AppModule, but could not be resolved to an NgModule class

53 export declare class ChartsModule {
                        ~~~~~~~~~~~~
src/app/app.component.html:413:25 - error TS8002: 'ngSwitch' is not a valid property of 
. 413
~~~~~~~~~~~~~~~~~~~~~~~~~~~~ src/app/app.component.ts:5:16 5 templateUrl: './app.component.html', ~~~~~~~~~~~~~~~~~~~~~~ Error occurs in the template of component AppComponent. src/app/app.component.html:531:1 - error TS8001: 'router-outlet' is not a valid HTML element. 531 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ src/app/app.component.ts:5:16 5 templateUrl: './app.component.html', ~~~~~~~~~~~~~~~~~~~~~~ Error occurs in the template of component AppComponent. ** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ ** ℹ 「wdm」: Failed to compile. ℹ 「wdm」: Compiling... 95% emitting CopyPlugin ERROR in node_modules/ng2-charts/charts/charts.d.ts(53,22): error TS-996002: Appears in the NgModule.imports of AppModule, but could not be resolved to an NgModule class src/app/app.component.html(413,25): error TS8002: 'ngSwitch' is not a valid property of
. src/app/app.component.html(531,1): error TS8001: 'router-outlet' is not a valid HTML element.

🌍 Your Environment

Angular Version:


Angular CLI: 9.0.0-next.4
Node: 12.10.0
OS: darwin x64
Angular: 9.0.0-next.6
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.900.0-next.4
@angular-devkit/build-angular     0.900.0-next.4
@angular-devkit/build-optimizer   0.900.0-next.4
@angular-devkit/build-webpack     0.900.0-next.4
@angular-devkit/core              9.0.0-next.4
@angular-devkit/schematics        9.0.0-next.4
@angular/cli                      9.0.0-next.4
@ngtools/webpack                  9.0.0-next.4
@schematics/angular               9.0.0-next.4
@schematics/update                0.900.0-next.4
rxjs                              6.4.0
typescript                        3.5.3
webpack                           4.39.3

Anything else relevant?
Very similar to another issue I opened: #32729

I think it's acceptable to expect users of Angular to upgrade external libraries they use (e.g. ng2-charts), but I wanted to note this since the original intention behind Angular 9 was that it would work out of the box for all users with minimal changes 🤷‍♂

Please keep up the wonderful work ❤️ 🙇 I love working with Angular and with the Angular team (the few times I have interacted) 🙌

Activity

  1. added this to the needsTriage milestone on Sep 18, 2019
  2. fr0 commented on Sep 18, 2019

    @fr0

    Maybe the same problem as #32078, which was fixed in 9.0.0-next.7. You might try that version to see if the problem still occurs.

  3. whyboris commented on Sep 19, 2019

    @whyboris
    Author

    thank you @fr0 -- I tried with the 9.0.0-next.7 (along with the latest cli versions and rm -rf node_modules and npm install) but the error is identical to before (same as Exception or Error above, pasting just the last 3 lines):

        ERROR in node_modules/ng2-charts/charts/charts.d.ts(53,22): error TS-996002: Appears in the NgModule.imports of AppModule, but could not be resolved to an NgModule class
        src/app/app.component.html(413,25): error TS8002: 'ngSwitch' is not a valid property of <div>.
        src/app/app.component.html(531,1): error TS8001: 'router-outlet' is not a valid HTML element.
    

    PR with the next7 branch: https://github.com/whyboris/angular-ivy-problem-2/pull/4/files

  4. whyboris commented on Sep 28, 2019

    @whyboris
    Author

    I think it's sensible for Angular to allow some outdated versions of libraries to become incompatible with new Angular releases 👌

    The solution here is simple: upgrade ng2-charts version 1.6.0 to latest 2.3.0 👌

    Please feel free to close the issue if you think there's nothing to learn about why Angular can not compile with the old version of a library 👌

  5. modified the milestones: needsTriage, Backlog on Oct 29, 2019
  6. removed this from the Backlog milestone on Nov 9, 2019
  7. added this to the Backlog milestone on Nov 9, 2019
  8. modified the milestones: Backlog, v9-blockers on Nov 9, 2019
  9. mhevery commented on Nov 18, 2019

    @mhevery
    Contributor

    works with latest closing

  10. angular-automatic-lock-bot commented on Dec 19, 2019

    @angular-automatic-lock-bot

    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.

  11. locked and limited conversation to collaborators on Dec 19, 2019
  12. added
    regressionIndicates than the issue relates to something that worked in a previous version
    and removed on Feb 11, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    freq1: lowregressionIndicates than the issue relates to something that worked in a previous versiontype: bug/fix

    Type

    No type

    Projects

    No projects

      Milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions