Flex-layout: Angular 9 build failed

Created on 13 Feb 2020 · 12Comments · Source: angular/flex-layout

Bug Report

What is the expected behavior?

$ ng update
$ ng build

[2] 
[2] Compiling @angular/material/button : es2015 as esm2015
[2] 
[2] Compiling @angular/cdk/layout : es2015 as esm2015
[2] 
[2] Compiling @angular/material/snack-bar : es2015 as esm2015
[2] 
[2] Compiling @angular/material/dialog : es2015 as esm2015
[2] 
[2] Compiling @angular/flex-layout/core : es2015 as esm2015
[2] 
[2] Compiling @angular/flex-layout/extended : es2015 as esm2015
[2] 
[2] Compiling @angular/flex-layout/flex : es2015 as esm2015
[2] 
[2] Compiling @angular/flex-layout/grid : es2015 as esm2015
[2] 

[2] ERROR in Failed to compile entry-point @angular/flex-layout (es2015 as esm2015) due to compilation errors:
[2] ../../../../cloud-user/ui-packages/node_modules/@angular/flex-layout/flex/typings/module.d.ts:6:22 - error NG6002: Appears in the NgModule.imports of FlexLayoutModule, but could not be resolved to an NgModule class
[2] 
[2] 6 export declare class FlexModule {
[2]                        ~~~~~~~~~~
[2] ../../../../cloud-user/ui-packages/node_modules/@angular/flex-layout/extended/typings/module.d.ts:6:22 - error NG6002: Appears in the NgModule.imports of FlexLayoutModule, but could not be resolved to an NgModule class
[2] 
[2] 6 export declare class ExtendedModule {
[2]                        ~~~~~~~~~~~~~~
[2] ../../../../cloud-user/ui-packages/node_modules/@angular/flex-layout/grid/typings/module.d.ts:6:22 - error NG6002: Appears in the NgModule.imports of FlexLayoutModule, but could not be resolved to an NgModule class
[2] 
[2] 6 export declare class GridModule {
[2]                        ~~~~~~~~~~
[2] ../../../../cloud-user/ui-packages/node_modules/@angular/flex-layout/flex/typings/module.d.ts:6:22 - error NG6003: Appears in the NgModule.exports of FlexLayoutModule, but could not be resolved to an NgModule, Component, Directive, or Pipe class
[2] 
[2] 6 export declare class FlexModule {
[2]                        ~~~~~~~~~~
[2] ../../../../cloud-user/ui-packages/node_modules/@angular/flex-layout/extended/typings/module.d.ts:6:22 - error NG6003: Appears in the NgModule.exports of FlexLayoutModule, but could not be resolved to an NgModule, Component, Directive, or Pipe class
[2] 
[2] 6 export declare class ExtendedModule {
[2]                        ~~~~~~~~~~~~~~
[2] ../../../../cloud-user/ui-packages/node_modules/@angular/flex-layout/grid/typings/module.d.ts:6:22 - error NG6003: Appears in the NgModule.exports of FlexLayoutModule, but could not be resolved to an NgModule, Component, Directive, or Pipe class
[2] 
[2] 6 export declare class GridModule {
[2]                        ~~~~~~~~~~
[2] 
[2] error Command failed with exit code 1.
[2] info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
[2] yarn build.test exited with code 1

Source

splincode

👍3

Most helpful comment

Hi , I also faced the similar issue but I updated the flex-layout component (npm install @angular/flex-layout@latest --save) and served it again ,it worked for me . My angular version and flex-layout version is as below
"@angular/animations": "^9.0.7",
"@angular/cdk": "^9.2.0",
"@angular/common": "~9.0.3",
"@angular/compiler": "~9.0.3",
"@angular/core": "~9.0.3",
"@angular/flex-layout": "^9.0.0-beta.29",

srilek on 27 Mar 2020

👍2

All 12 comments

ng update does not update Flex Layout, please make sure you update that to v9 as well. Likewise, when you don’t follow the issue template, we don’t have enough information to assist. For all new issues, please follow the template.

CaerusKaru on 13 Feb 2020

👍1

@CaerusKaru ng update updated Flex Layout to 9.0.0-beta.29 for me and I'm getting the same issue. I have two projects that both consume the same library (called common-angular-workspace), and it's the library that's giving me trouble. It builds fine, but when I try to run (ng serve) one of the projects that consumes it, it gives me the following:

ERROR in Failed to compile entry-point @angular/flex-layout (es2015 as esm2015) due to compilation errors:
../../../common-angular-workspace/node_modules/@angular/flex-layout/flex/typings/module.d.ts:6:22 - error NG6002: Appears in the NgModule.imports of FlexLayoutModule, but could not be resolved to an NgModule class

6 export declare class FlexModule {
                       ~~~~~~~~~~
../../../common-angular-workspace/node_modules/@angular/flex-layout/extended/typings/module.d.ts:6:22 - error NG6002: Appears in the NgModule.imports
of FlexLayoutModule, but could not be resolved to an NgModule class

6 export declare class ExtendedModule {
                       ~~~~~~~~~~~~~~
../../../common-angular-workspace/node_modules/@angular/flex-layout/grid/typings/module.d.ts:6:22 - error NG6002: Appears in the NgModule.imports of FlexLayoutModule, but could not be resolved to an NgModule class

6 export declare class GridModule {
                       ~~~~~~~~~~
../../../common-angular-workspace/node_modules/@angular/flex-layout/flex/typings/module.d.ts:6:22 - error NG6003: Appears in the NgModule.exports of FlexLayoutModule, but could not be resolved to an NgModule, Component, Directive, or Pipe class

6 export declare class FlexModule {
                       ~~~~~~~~~~
../../../common-angular-workspace/node_modules/@angular/flex-layout/extended/typings/module.d.ts:6:22 - error NG6003: Appears in the NgModule.exports
of FlexLayoutModule, but could not be resolved to an NgModule, Component, Directive, or Pipe class

6 export declare class ExtendedModule {
                       ~~~~~~~~~~~~~~
../../../common-angular-workspace/node_modules/@angular/flex-layout/grid/typings/module.d.ts:6:22 - error NG6003: Appears in the NgModule.exports of FlexLayoutModule, but could not be resolved to an NgModule, Component, Directive, or Pipe class

Angular CLI: 9.0.3
Node: 10.15.1
OS: win32 x64

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

Package                            Version
------------------------------------------------------------
@angular-devkit/architect          0.900.3
@angular-devkit/build-angular      0.900.3
@angular-devkit/build-ng-packagr   0.900.3
@angular-devkit/build-optimizer    0.900.3
@angular-devkit/build-webpack      0.900.3
@angular-devkit/core               9.0.3
@angular-devkit/schematics         9.0.3
@angular/cdk                       9.1.0
@angular/cli                       9.0.3
@angular/flex-layout               9.0.0-beta.29
@angular/material                  9.1.0
@angular/material-moment-adapter   9.1.0
@ngtools/webpack                   9.0.3
@nguniversal/common                9.0.1
@nguniversal/express-engine        9.0.1
@schematics/angular                9.0.3
@schematics/update                 0.900.3
ng-packagr                         9.0.0
rxjs                               6.5.4
typescript                         3.7.5
webpack                            4.41.2

Do you want me to make a new issue for this or could you consider reopening this one, or am I doing something wrong?

adamdport on 3 Mar 2020

@adamdport Try rebuilding node_modules, and if that fails upgrade to v9.0.4 for Angular and related deps.

CaerusKaru on 3 Mar 2020

@CaerusKaru I

deleted node modules in my project, in my library, and in my library's project folder
deleted the output (/dist) folder in my project and in my library
cleared my npm cache
updated npm modules in my project and library (now on 9.0.4)

It looks like Angular changed the error message slightly but it's just a more verbose version of the same thing:

ERROR in Failed to compile entry-point @angular/flex-layout (es2015 as esm2015) due to compilation errors:
../../../common-angular-workspace/node_modules/@angular/flex-layout/flex/typings/module.d.ts:6:22 - error NG6002: Appears in the NgModule.imports of FlexLayoutModule, but could not be resolved to an NgModule class.

This likely means that the library (@angular/flex-layout/flex) which declares FlexModule has not been processed correctly by ngcc, or is not compatible with Angular Ivy. Check if a newer version of the library is available, and update if so. Also consider checking with the library's authors to see if the library is expected to be compatible with Ivy.

6 export declare class FlexModule {
                       ~~~~~~~~~~
../../../common-angular-workspace/node_modules/@angular/flex-layout/extended/typings/module.d.ts:6:22 - error NG6002: Appears in the NgModule.imports of FlexLayoutModule, but could not be resolved to an NgModule class.

This likely means that the library (@angular/flex-layout/extended) which declares ExtendedModule has not been processed correctly by ngcc, or is not compatible with Angular Ivy. Check if a
newer version of the library is available, and update if so. Also consider checking with the library's authors to see if the library is expected to be compatible with Ivy.

6 export declare class ExtendedModule {
                       ~~~~~~~~~~~~~~
../../../common-angular-workspace/node_modules/@angular/flex-layout/grid/typings/module.d.ts:6:22 - error NG6002: Appears in the NgModule.imports of FlexLayoutModule, but could not be resolved to an NgModule class.

This likely means that the library (@angular/flex-layout/grid) which declares GridModule has not been processed correctly by ngcc, or is not compatible with Angular Ivy. Check if a newer version of the library is available, and update if so. Also consider checking with the library's authors to see if the library is expected to be compatible with Ivy.

6 export declare class GridModule {
                       ~~~~~~~~~~
../../../common-angular-workspace/node_modules/@angular/flex-layout/flex/typings/module.d.ts:6:22 - error NG6003: Appears in the NgModule.exports of FlexLayoutModule, but could not be resolved to an NgModule, Component, Directive, or Pipe class.

This likely means that the library (@angular/flex-layout/flex) which declares FlexModule has not been processed correctly by ngcc, or is not compatible with Angular Ivy. Check if a newer version of the library is available, and update if so. Also consider checking with the library's authors to see if the library is expected to be compatible with Ivy.

6 export declare class FlexModule {
                       ~~~~~~~~~~
../../../common-angular-workspace/node_modules/@angular/flex-layout/extended/typings/module.d.ts:6:22 - error NG6003: Appears in the NgModule.exports of FlexLayoutModule, but could not be resolved to an NgModule, Component, Directive, or Pipe class.

This likely means that the library (@angular/flex-layout/extended) which declares ExtendedModule has not been processed correctly by ngcc, or is not compatible with Angular Ivy. Check if a
newer version of the library is available, and update if so. Also consider checking with the library's authors to see if the library is expected to be compatible with Ivy.

6 export declare class ExtendedModule {
                       ~~~~~~~~~~~~~~
../../../common-angular-workspace/node_modules/@angular/flex-layout/grid/typings/module.d.ts:6:22 - error NG6003: Appears in the NgModule.exports of FlexLayoutModule, but could not be resolved to an NgModule, Component, Directive, or Pipe class.

Flex layout is a peer dependency in my library along with all the other common angular dependencies. I can try putting together a reproduction repo if that would be helpful?

adamdport on 3 Mar 2020

👍2

I've created reproduction repos here:

Project: https://github.com/adamdport/flexLayoutDemo
Workspace with Library: https://github.com/adamdport/flexLayoutWorkspace

Build the workspace (ng build)
Link the workspace (yarn link from dist/my-library)
Add the linked workspace from the project (yarn link my-library)
Serve the project (ng serve)

Let me know if you need more info.

adamdport on 4 Mar 2020

@adamdport This isn’t an issue with Flex Layout, so please take your reproduction and open an issue on angular/angular (having your reproduction is super helpful, just not here). I suspect the issue is the yarn link. I don’t know if ngcc supports symlinks.

CaerusKaru on 4 Mar 2020

@CaerusKaru it looks like there's already some chatter about it here, even going so far as mentioning flex-layout. Do you think this is the same issue?

adamdport on 4 Mar 2020

Facing the same issue while upgrading the mono repository to Angular- 9.0.5. Any help to fix the issue would be appreciated.

This is the error I am getting while rush build:

Compiling @angular/flex-layout/core : es2015 as esm2015
Compiling @angular/flex-layout/extended : es2015 as esm2015
Compiling @angular/cdk/bidi : es2015 as esm2015
Compiling @angular/flex-layout/flex : es2015 as esm2015
Compiling @angular/flex-layout/grid : es2015 as esm2015
[...91 lines omitted...]
../angular-components/node_modules/@angular/flex-layout/extended/typings/module.d.ts:6:22 - error NG6002: Appears in the NgModule.imports of FlexLayoutModule, but could not be resolved to an NgModule class.
This likely means that the library (@angular/flex-layout/extended) which declares ExtendedModule has not been processed correctly by ngcc, or is not compatible with Angular Ivy. Check if a newer version of the library is available, and update if so. Also consider checking with the library's authors to see if the library is expected to be compatible with Ivy.
6 export declare class ExtendedModule {
~~~~
../angular-components/node_modules/@angular/flex-layout/grid/typings/module.d.ts:6:22 - error NG6002:
Appears in the NgModule.imports of FlexLayoutModule, but could not be resolved to an NgModule class.
This likely means that the library (@angular/flex-layout/grid) which declares GridModule has not been
processed correctly by ngcc, or is not compatible with Angular Ivy. Check if a newer version of the library is available, and update if so. Also consider checking with the library's authors to see if the
library is expected to be compatible with Ivy.
6 export declare class GridModule {
~~~~
../angular-components/node_modules/@angular/flex-layout/flex/typings/module.d.ts:6:22 - error NG6003:
Appears in the NgModule.exports of FlexLayoutModule, but could not be resolved to an NgModule, Component, Directive, or Pipe class.
This likely means that the library (@angular/flex-layout/flex) which declares FlexModule has not been
processed correctly by ngcc, or is not compatible with Angular Ivy. Check if a newer version of the library is available, and update if so. Also consider checking with the library's authors to see if the
library is expected to be compatible with Ivy.
6 export declare class FlexModule {
~~
../angular-components/node_modules/@angular/flex-layout/extended/typings/module.d.ts:6:22 - error NG6003: Appears in the NgModule.exports of FlexLayoutModule, but could not be resolved to an NgModule, Component, Directive, or Pipe class.
This likely means that the library (@angular/flex-layout/extended) which declares ExtendedModule has not been processed correctly by ngcc, or is not compatible with Angular Ivy. Check if a newer version of the library is available, and update if so. Also consider checking with the library's authors to see if the library is expected to be compatible with Ivy.
6 export declare class ExtendedModule {
~~~~
../angular-components/node_modules/@angular/flex-layout/grid/typings/module.d.ts:6:22 - error NG6003:
Appears in the NgModule.exports of FlexLayoutModule, but could not be resolved to an NgModule, Component, Directive, or Pipe class.
This likely means that the library (@angular/flex-layout/grid) which declares GridModule has not been
processed correctly by ngcc, or is not compatible with Angular Ivy. Check if a newer version of the library is available, and update if so. Also consider checking with the library's authors to see if the
library is expected to be compatible with Ivy.
6 export declare class GridModule {
~~~~

neharica on 18 Mar 2020

We currently facing the same issue, but it was neither an angular problem nor flex-layout problem it was more we have an old version from flex-layout. This also happens if you have nested node_modules folder for us we have an angular project which has its own node_modules folder and this one was taken instead of the root lvl node_modules folder.

Currently we using @angular/flex-layout 9.0.0-beta.29 with angular 9.0.7 and it is working, maybe just clear your node_modules folder and clear npm cache.

r-hannuschka on 20 Mar 2020

👍1

@r-hannuschka Thanks for the quick response. Our current version of @angular/flex-layout is 9.0.0-beta.29 and have updated to angular 9.0.7. But, the issue still persists.
In npm/yarm scenario we are able to successfully run build and test. But when it comes to monorepo, where we use @microsoft/rush, we are facing this issue during rush test.

neharica on 21 Mar 2020