Использование FlexLayoutModule дает ошибку в Angular 11

Я столкнулся с той же проблемой. Я исправил это, импортировав не FlexLayoutModule, а FlexModule:

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

Это мой 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"
},

Вероятно, это проблема автозаполнения IDE.

При импорте FlexLayoutModule убедитесь, что он импортирован из @angular/flex-layout. Есть еще один пакет FlexLayoutModule в esm5, который несовместим с Angular 9 и выше.

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

. . .

imports: [
    . . .
    FlexLayoutModule
  ],
. . .