Using FlexLayoutModule gives error in Angular 11

Admin 1
Viewed 2914

I had installed FlexLayoutModule and declared it when I ran into this error:

Error: node_modules/@angular/flex-layout/typings/module.d.ts:16:22 - error NG6002: Appears in the NgModule.imports of AppModule, but could not be resolved to an NgModule class.

This likely means that the library (@angular/flex-layout/typings/module) which declares FlexLayoutModule 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.

16 export declare class FlexLayoutModule {
                        ~~~~~~~~~~~~~~~~

What could be wrong?
The version of FlexLayoutModule is 11.0.0-beta.33

angular11 angular
2 Answers

I ran into the same problem. I fixed it by importing not FlexLayoutModule but FlexModule:

import { FlexModule } from '@angular/flex-layout';

Thats my package.json:

"dependencies": {
"@angular/animations": "~11.0.5",
"@angular/cdk": "^11.0.3",
"@angular/common": "~11.0.5",
"@angular/compiler": "~11.0.5",
"@angular/core": "~11.0.5",
"@angular/flex-layout": "^11.0.0-beta.33",
"@angular/forms": "~11.0.5",
"@angular/material": "^11.0.3",
"@angular/platform-browser": "~11.0.5",
"@angular/platform-browser-dynamic": "~11.0.5",
"@angular/router": "~11.0.5",
"rxjs": "~6.6.0",
"tslib": "^2.0.0",
"zone.js": "~0.10.2"
},
user_69201090

This is probably an IDE autocomplete issue.

When importing FlexLayoutModule make sure it is imported from @angular/flex-layout. There is another FlexLayoutModule in esm5 package, which is not compatible with Angular 9 or higher.

import { FlexLayoutModule } from "@angular/flex-layout";

. . .

imports: [
    . . .
    FlexLayoutModule
  ],
. . .
user_25331090
Related