Flex-layout: Flex-layout 10.0.0-beta.32 throws an exception during AOT build

[JadedEric]

Bug Report

What is the expected behavior?

Create a new Angular 9 application, and add both Flex-Layout and CDK to the project. This is the only additions to the project after creating a new one.

Run "ng b --aot" and the expected behavior is that the build would succeed.

What is the current behavior?

Currently "ng b --aot" throws a typing exception during compilation.

What are the steps to reproduce?

• Upgrade environment to the latest version of Angular CLI (9.1.8)
• Run "ng n demo-project --routing --style=scss --skipTests" to create a new project
• Navigate into "demo-project" directory
• Run "ng b --aot" to ensure the newly created application builds successfully
• No run "npm i @angular/flex-layout @angular/cdk" to install the CDK and Flex-Layout
• Upon completion, run "ng b -aot"

• Expected to have a successful build, but it fails.

• I have tested this on 3 different machines at the office with the latest version and they all fail with:

$ ng b --aot
Compiling @angular/cdk/platform : es2015 as esm2015
Compiling @angular/cdk/bidi : es2015 as esm2015
Compiling @angular/cdk/collections : es2015 as esm2015
Compiling @angular/cdk/keycodes : es2015 as esm2015
Compiling @angular/flex-layout/core : es2015 as esm2015
Compiling @angular/cdk/observers : es2015 as esm2015
Compiling @angular/cdk/portal : es2015 as esm2015
Compiling @angular/cdk/clipboard : es2015 as esm2015
Compiling @angular/cdk/layout : es2015 as esm2015
Compiling @angular/cdk/text-field : es2015 as esm2015
Compiling @angular/cdk/accordion : es2015 as esm2015
Compiling @angular/cdk/scrolling : es2015 as esm2015
Compiling @angular/cdk/table : es2015 as esm2015
Compiling @angular/cdk/a11y : es2015 as esm2015
Compiling @angular/flex-layout/extended : es2015 as esm2015
Compiling @angular/flex-layout/flex : es2015 as esm2015
Compiling @angular/flex-layout/grid : es2015 as esm2015
Compiling @angular/cdk/drag-drop : es2015 as esm2015
Compiling @angular/cdk/overlay : es2015 as esm2015
Compiling @angular/cdk/tree : es2015 as esm2015
Compiling @angular/cdk/stepper : es2015 as esm2015
Compiling @angular/flex-layout : es2015 as esm2015
Error: Error on worker #1: Error: No typings declaration can be found for the referenced NgModule class in static withConfig(configOptions,
// tslint:disable-next-line:max-line-length
breakpoints = []) {
return {
ngModule: FlexLayoutModule,
providers: configOptions.serverLoaded ?
[
{ provide: LAYOUT_CONFIG, useValue: Object.assign(Object.assign({}, DEFAULT_CONFIG), configOptions) },
{ provide: BREAKPOINT, useValue: breakpoints, multi: true },
{ provide: SERVER_TOKEN, useValue: true },
] : [
{ provide: LAYOUT_CONFIG, useValue: Object.assign(Object.assign({}, DEFAULT_CONFIG), configOptions) },
{ provide: BREAKPOINT, useValue: breakpoints, multi: true },
]
};
}.
at ModuleWithProvidersAnalyzer.resolveNgModuleReference (C:\Development\demo\demo-project\node_modules\@angularcompiler-cli\ngcc\srcanalysis\module_with_providers_analyzer.js:178:23)
at ModuleWithProvidersAnalyzer.getDtsModuleWithProvidersFunction (C:\Development\demo\demo-project\node_modules\@angularcompiler-cli\ngcc\srcanalysis\module_with_providers_analyzer.js:165:33)
at C:\Development\demo\demo-project\node_modules\@angularcompiler-cli\ngcc\srcanalysis\module_with_providers_analyzer.js:46:43
at Array.forEach ()
at C:\Development\demo\demo-project\node_modules\@angularcompiler-cli\ngcc\srcanalysis\module_with_providers_analyzer.js:39:28
at Array.forEach ()
at ModuleWithProvidersAnalyzer.analyzeProgram (C:\Development\demo\demo-project\node_modules\@angularcompiler-cli\ngcc\srcanalysis\module_with_providers_analyzer.js:37:23)
at Transformer.analyzeProgram (C:\Development\demo\demo-project\node_modules\@angularcompiler-cli\ngcc\src\packages\transformer.js:132:45)
at Transformer.transform (C:\Development\demo\demo-project\node_modules\@angularcompiler-cli\ngcc\src\packages\transformer.js:75:27)
at C:\Development\demo\demo-project\node_modules\@angularcompiler-cli\ngcc\srcexecution\create_compile_function.js:48:42
at ClusterMaster.onWorkerMessage (C:\Development\demo\demo-project\node_modules\@angularcompiler-cli\ngcc\srcexecution\cluster\master.js:194:27)
at C:\Development\demo\demo-project\node_modules\@angularcompiler-cli\ngcc\srcexecution\cluster\master.js:54:95
at ClusterMaster. (C:\Development\demo\demo-project\node_modules\@angularcompiler-cli\ngcc\srcexecution\cluster\master.js:292:57)
at step (C:\Development\demo\demo-project\node_modules\tslib\tslib.js:141:27)
at Object.next (C:\Development\demo\demo-project\node_modules\tslib\tslib.js:122:57)
at C:\Development\demo\demo-project\node_modules\tslib\tslib.js:115:75
at new Promise ()
at Object.__awaiter (C:\Development\demo\demo-project\node_modules\tslib\tslib.js:111:16)
at EventEmitter. (C:\Development\demo\demo-project\node_modules\@angularcompiler-cli\ngcc\srcexecution\cluster\master.js:286:32)
at EventEmitter.emit (events.js:315:20)
An unhandled exception occurred: NGCC failed.
See "C:\Users[user]\AppData\Local\Temp\ng-4aneGgangular-errors.log" for further details.

What is the use-case or motivation for changing an existing behavior?

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

$ ng --version

Angular CLI: 9.1.8
Node: 12.18.0
OS: win32 x64

Angular: 9.1.11
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router
Ivy Workspace: Yes

Package Version

@angular-devkit/architect 0.901.8
@angular-devkit/build-angular 0.901.8
@angular-devkit/build-optimizer 0.901.8
@angular-devkit/build-webpack 0.901.8
@angular-devkit/core 9.1.8
@angular-devkit/schematics 9.1.8
@angular/cdk 9.2.4
@angular/cli 9.1.8
@angular/flex-layout 10.0.0-beta.32
@ngtools/webpack 9.1.8
@schematics/angular 9.1.8
@schematics/update 0.901.8
rxjs 6.5.5
typescript 3.8.3
webpack 4.42.0

Is there anything else we should know?

Think I covered everything in the reproduction steps. I have another project running 9.0.0-beta.29 and it's not doing this. Downgrading the application to 9.0.0-beta.29 also does not work, so not sure what's actually happening here?

[CaerusKaru]

I’m not sure how many times to say this or how to make this clearer since NPM peer dependencies are clearly defined: v10 works exclusively with v10 releases of Angular and CDK. We do not support it working with any other version, especially since TypeScript versions change with releases.

[ruisilva450]

Maybe would be wiser to not put the v10 beta on the master branch since the v10 of angular is not yet released... and it's a beta

Edit: Just noticed you don't really have any non-beta releases. Why?

[sebasf8]

I had the same problem, this version needs some peers ( @angular/cdk@^10.0.0-rc.0, @angular/core@>=10.0.0-rc.0, @angular/common@>=10.0.0-rc.0, @angular/platform-browser@>=10.0.0-rc.0)

So I've decided to install the previous version and it compiled

npm i @angular/[email protected]

Regards!

[angular-automatic-lock-bot[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._}