Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Angular 10-rc.0 library build failures #37330

Closed
gnomeontherun opened this issue May 28, 2020 · 7 comments
Closed

Angular 10-rc.0 library build failures #37330

gnomeontherun opened this issue May 28, 2020 · 7 comments

Comments

@gnomeontherun
Copy link
Contributor

🐞 bug report

Affected Package

The issue is caused by package @angular/compiler-cli I suspect, or ng-packagr, or typescript.

Is this a regression?

It seems possible.

Description

The build fails massively after updating to 10-rc.0, with the compiler complaining about virtually every directive or service missing. A new CLI project worked with the default vanilla library but not when I added the Clarity library. I suspect the issue is around how Typescript is compiling our library now that the version has been bumped.

The library is built without problems being reported, but when the ivy precompiler runs when building an application, the library cannot be compiled with ivy and the build fails.

🔬 Minimal Reproduction

https://github.com/gnomeontherun/angular-10-library-compiler-issues

git clone https://github.com/gnomeontherun/angular-10-library-compiler-issues
cd angular-10-library-compiler-issues
npm install
ng build clr-angular --prod # build reports green
ng build --prod # fails to precompile library and fails build

Build errors: https://github.com/gnomeontherun/angular-10-library-compiler-issues/runs/717676813?check_suite_focus=true

🔥 Exception or Error

Snippet of some of the errors


22254 let StepperOompaLoompa = /** @class */ (() => {
          ~~~~~~~~~~~~~~~~~~
dist/clr-angular/fesm2015/clr-angular.js:21832:5 - error NG6003: Appears in the NgModule.exports of ClrStepperModule, but itself has errors

21832 let ClrAccordionModule = /** @class */ (() => {
          ~~~~~~~~~~~~~~~~~~
dist/clr-angular/fesm2015/clr-angular.js:22300:21 - error NG2003: No suitable injection token for parameter 'ariaLiveService' of class 'ClrProgressBar'.
no type or decorator

22300         constructor(ariaLiveService) {
                          ~~~~~~~~~~~~~~~
dist/clr-angular/fesm2015/clr-angular.js:22487:27 - error NG6001: The class 'ClrProgressBar' is listed in the declarations of the NgModule 'ClrProgressBarModule', but is not a directive, a component, or a pipe. Either remove it from the NgModule's declarations, or add an appropriate Angular decorator.

22487             declarations: [CLR_PROGRESS_BAR_DIRECTIVES],
                                ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  dist/clr-angular/fesm2015/clr-angular.js:22298:5
    m22298 let ClrProgressBar = /** @class */ (() => {
              ~~~~~~~~~~~~~~
    'ClrProgressBar' is declared here.
dist/clr-angular/fesm2015/clr-angular.js:22298:5 - error NG6003: Appears in the NgModule.exports of ClrProgressBarModule, but could not be resolved to an NgModule, Component, Directive, or Pipe class.

Is it missing an Angular annotation?

22298 let ClrProgressBar = /** @class */ (() => {
          ~~~~~~~~~~~~~~
dist/clr-angular/fesm2015/clr-angular.js:22631:21 - error NG2003: No suitable injection token for parameter 'iconAttributeService' of class 'ClrTimelineStep'.
no type or decorator

22631         constructor(iconAttributeService, platformId) {
                          ~~~~~~~~~~~~~~~~~~~~
dist/clr-angular/fesm2015/clr-angular.js:7774:5 - error NG6002: Appears in the NgModule.imports of ClrTimelineModule, but itself has errors

7774 let ClrSpinnerModule = /** @class */ (() => {
         ~~~~~~~~~~~~~~~~
dist/clr-angular/fesm2015/clr-angular.js:22745:27 - error NG6001: The class 'ClrTimelineStep' is listed in the declarations of the NgModule 'ClrTimelineModule', but is not a directive, a component, or a pipe. Either remove it from the NgModule's declarations, or add an appropriate Angular decorator.

22745             declarations: [CLR_TIMELINE_DIRECTIVES],
                                ~~~~~~~~~~~~~~~~~~~~~~~~~

  dist/clr-angular/fesm2015/clr-angular.js:22629:5
    22629 let ClrTimelineStep = /** @class */ (() => {
              ~~~~~~~~~~~~~~~
    'ClrTimelineStep' is declared here.
dist/clr-angular/fesm2015/clr-angular.js:22629:5 - error NG6003: mAppears in the NgModule.exports of ClrTimelineModule, but could not be resolved to an NgModule, Component, Directive, or Pipe class.

Is it missing an Angular annotation?

22629 let ClrTimelineStep = /** @class */ (() => {
          ~~~~~~~~~~~~~~~
dist/clr-angular/fesm2015/clr-angular.js:7774:5 - error NG6003: Appears in the NgModule.exports of ClrTimelineModule, but itself has errors

7774 let ClrSpinnerModule = /** @class */ (() => {
         ~~~~~~~~~~~~~~~~
dist/clr-angular/fesm2015/clr-angular.js:16363:5 - error NG6003: Appears in the NgModule.exports of ClarityModule, but itself has errors

16363 let ClrEmphasisModule = /** @class */ (() => {
          ~~~~~~~~~~~~~~~~~
dist/clr-angular/fesm2015/clr-angular.js:14657:5 - error NG6003: Appears in the NgModule.exports of ClarityModule, but itself has errors

14657 let ClrDataModule = /** @class */ (() => {
          ~~~~~~~~~~~~~
dist/clr-angular/fesm2015/clr-angular.js:18305:5 - error NG6003: Appears in the NgModule.exports of ClarityModule, but itself has errors

18305 let ClrModalModule = /** @class */ (() => {
          ~~~~~~~~~~~~~~
dist/clr-angular/fesm2015/clr-angular.js:6592:5 - error NG6003: Appears in the NgModule.exports of ClarityModule, but itself has errors

6592 let ClrLoadingModule = /** @class */ (() => {
         ~~~~~~~~~~~~~~~~
dist/clr-angular/fesm2015/clr-angular.js:3301:5 - error NG6003: Appears in the NgModule.exports of ClarityModule, but itself has errors

3301 let ClrConditionalModule = /** @class */ (() => {
         ~~~~~~~~~~~~~~~~~~~~
dist/clr-angular/fesm2015/clr-angular.js:3453:5 - error NG6003: Appears in the NgModule.exports of ClarityModule, but itself has errors

3453 let ClrFocusTrapModule = /** @class */ (() => {
         ~~~~~~~~~~~~~~~~~~
dist/clr-angular/fesm2015/clr-angular.js:7882:5 - error NG6003: Appears in the NgModule.exports of ClarityModule, but itself has errors

7882 let ClrFocusOnViewInitModule = /** @class */ (() => {
         ~~~~~~~~~~~~~~~~~~~~~~~~
dist/clr-angular/fesm2015/clr-angular.js:1664:5 - error NG6003: Appears in the NgModule.exports of ClarityModule, but itself has errors

1664 let ClrButtonModule = /** @class */ (() => {
         ~~~~~~~~~~~~~~~
dist/clr-angular/fesm2015/clr-angular.js:6568:5 - error NG6003: Appears in the NgModule.exports of ClarityModule, but itself has errors

6568 let ClrFormsModule = /** @class */ (() => {
         ~~~~~~~~~~~~~~
dist/clr-angular/fesm2015/clr-angular.js:18098:5 - error NG6003: Appears in the NgModule.exports of ClarityModule, but itself has errors

18098 let ClrLayoutModule = /** @class */ (() => {
          ~~~~~~~~~~~~~~~
dist/clr-angular/fesm2015/clr-angular.js:18739:5 - error NG6003: Appears in the NgModule.exports of ClarityModule, but itself has errors

18739 let ClrPopoverModule = /** @class */ (() => {
          ~~~~~~~~~~~~~~~~
dist/clr-angular/fesm2015/clr-angular.js:21402:5 - error NG6003: Appears in the NgModule.exports of ClarityModule, but itself has errors

21402 let ClrWizardModule = /** @class */ (() => {
          ~~~~~~~~~~~~~~~
[96mdist/clr-angular/fesm2015/clr-angular.js:7581:5 - error NG6003: Appears in the NgModule.exports of ClarityModule, but itself has errors

7581 let ClrDragAndDropModule = /** @class */ (() => {
         ~~~~~~~~~~~~~~~~~~~~
dist/clr-angular/fesm2015/clr-angular.js:22285:5 - error NG6003: Appears in the NgModule.exports of ClarityModule, but itself has errors

22285 let ClrStepperModule = /** @class */ (() => {
          ~~~~~~~~~~~~~~~~
dist/clr-angular/fesm2015/clr-angular.js:7774:5 - error NG6003: Appears in the NgModule.exports of ClarityModule, but itself has errors

7774 let ClrSpinnerModule = /** @class */ (() => {
         ~~~~~~~~~~~~~~~~
dist/clr-angular/fesm2015/clr-angular.js:22481:5 - error NG6003: Appears in the NgModule.exports of ClarityModule, but itself has errors

22481 let ClrProgressBarModule = /** @class */ (() => {
          ~~~~~~~~~~~~~~~~~~~~
dist/clr-angular/fesm2015/clr-angular.js:927:5 - error NG6003: Appears in the NgModule.exports of ClarityModule, but itself has errors

927 let ClrPopoverModuleNext = /** @class */ (() => {
        ~~~~~~~~~~~~~~~~~~~~
dist/clr-angular/fesm2015/clr-angular.js:22738:5 - error NG6003: Appears in the NgModule.exports of ClarityModule, but itself has errors

22738 let ClrTimelineModule = /** @class */ (() => {

🌍 Your Environment

Angular Version:


Angular CLI: 10.0.0-rc.0
Node: 12.16.0
OS: darwin x64

Angular: 10.0.0-rc.0
... animations, cli, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router
Ivy Workspace: Yes

Package                            Version
------------------------------------------------------------
@angular-devkit/architect          0.1000.0-rc.0
@angular-devkit/build-angular      0.1000.0-rc.0
@angular-devkit/build-ng-packagr   0.1000.0-rc.0
@angular-devkit/build-optimizer    0.1000.0-rc.0
@angular-devkit/build-webpack      0.1000.0-rc.0
@angular-devkit/core               10.0.0-rc.0
@angular-devkit/schematics         10.0.0-rc.0
@ngtools/webpack                   10.0.0-rc.0
@schematics/angular                10.0.0-rc.0
@schematics/update                 0.1000.0-rc.0
ng-packagr                         10.0.0-rc.0
rxjs                               6.5.5
typescript                         3.9.3
webpack                            4.43.0

Anything else relevant?

Our build was working with next-6, but after trying out rc-0 things broke.

@petebacondarwin
Copy link
Member

Did you try wiping out the node_modules and doing a fresh install?

@gnomeontherun
Copy link
Contributor Author

The reproduction has a GitHub action setup that runs a fresh install to test, and shows the error. I have tried this though locally with no luck.

@ngbot ngbot bot added this to the needsTriage milestone May 28, 2020
@petebacondarwin
Copy link
Member

Hmm, so this is weird... In the fesm2015.js file I see the following:

    ClrPopoverContent.ctorParameters = () => [
        { type: HTMLDocument, decorators: [{ type: Inject, args: [DOCUMENT,] }] },
        { type: ViewContainerRef },
        { type: TemplateRef },
        { type: Renderer2 },
        { type: ClrPopoverPositionService },
        { type: ClrPopoverEventsService },
        { type: ClrPopoverToggleService }
    ];

    ...

    ClrPopoverContent = __decorate([
        Directive({ selector: '[clrPopoverContent]' }),
        __param(0, Inject(DOCUMENT))
    ], ClrPopoverContent);

Notice that the first statement decorates the class with constructor parameter information, which is used to compute injection providers. The second statement is decorating the class again, this time with the Directive decorator and only "one" parameter information...

I believe that ngcc is only reading the parameter information from the second statement, which is why it is not getting the information needed for the subsequent parameters.

I am not sure if this is a bug in the TS compiler, or something to do with how ng-packagr bundles the classes.

It is possible that we could tweak ngcc to be tolerant of this, but it is worth finding out if there is a bug/fix upstream that would solve it first.

@petebacondarwin
Copy link
Member

Compiling only with ngc produces the output I would expect:

    ClrPopoverContent = __decorate([
        Directive({ selector: '[clrPopoverContent]' }),
        __param(0, Inject(DOCUMENT)),
        __metadata("design:paramtypes", [HTMLDocument,
            ViewContainerRef,
            TemplateRef,
            Renderer2,
            ClrPopoverPositionService,
            ClrPopoverEventsService,
            ClrPopoverToggleService])
    ], ClrPopoverContent);

@petebacondarwin
Copy link
Member

It looks like the output has always been like this: https://unpkg.com/browse/@clr/angular@3.1.3/fesm2015/clr-angular.js

So it must be that ngcc is no longer as tolerant to this. I'll take a look next week.

@JoostK
Copy link
Member

JoostK commented May 29, 2020

I believe ng-packagr has been transforming the __metadata into ctorParameters to workaround the TDZ in ES2015, which is a problem in TS's decorator emit.

See #30106 and ng-packagr/ng-packagr#1401.

petebacondarwin added a commit to petebacondarwin/angular that referenced this issue Jun 4, 2020
Now in TS 3.9, classes in ES2015 can be wrapped in an IIFE.
This commit ensures that we still find the static properties that contain
decorator information, even if they are attached to the adjacent node
of the class, rather than the implementation or declaration.

Fixes angular#37330
petebacondarwin added a commit to petebacondarwin/angular that referenced this issue Jun 4, 2020
Now in TS 3.9, classes in ES2015 can be wrapped in an IIFE.
This commit ensures that we still find the static properties that contain
decorator information, even if they are attached to the adjacent node
of the class, rather than the implementation or declaration.

Fixes angular#37330
@atscott atscott closed this as completed in 818d93d Jun 5, 2020
atscott pushed a commit that referenced this issue Jun 5, 2020
…37436)

Now in TS 3.9, classes in ES2015 can be wrapped in an IIFE.
This commit ensures that we still find the static properties that contain
decorator information, even if they are attached to the adjacent node
of the class, rather than the implementation or declaration.

Fixes #37330

PR Close #37436
ngwattcos pushed a commit to ngwattcos/angular that referenced this issue Jun 25, 2020
…ngular#37436)

Now in TS 3.9, classes in ES2015 can be wrapped in an IIFE.
This commit ensures that we still find the static properties that contain
decorator information, even if they are attached to the adjacent node
of the class, rather than the implementation or declaration.

Fixes angular#37330

PR Close angular#37436
@angular-automatic-lock-bot
Copy link

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.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Jul 6, 2020
profanis pushed a commit to profanis/angular that referenced this issue Sep 5, 2020
…ngular#37436)

Now in TS 3.9, classes in ES2015 can be wrapped in an IIFE.
This commit ensures that we still find the static properties that contain
decorator information, even if they are attached to the adjacent node
of the class, rather than the implementation or declaration.

Fixes angular#37330

PR Close angular#37436
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

Successfully merging a pull request may close this issue.

4 participants