Angular 10-rc.0 library build failures

🐞 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.

[JoostK]

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]

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.