FlexLayoutModule not working with Angular 11

Viewed 4365

I updated to version 11 today. My package json is below. The FlexLayoutModule no longer engages and formats the divs with the directives. It doesn't appear that anything happens at all, but I don't get any error messages. Here is my package.json and the app module.

I did find some chatter on github showing that version 10 of Flex did not work when Angular 11 came out. The discussion seemed to just end without any conclusion. Any help is great.

{
  "name": "mak-clean",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^11.0.3",
    "@angular/cdk": "~8.2.3",
    "@angular/common": "~11.0.3",
    "@angular/compiler": "~11.0.3",
    "@angular/core": "~11.0.3",
    "@angular/fire": "^6.1.4",
    "@angular/flex-layout": "^11.0.0-beta.33",
    "@angular/forms": "^11.0.3",
    "@angular/material": "^8.2.3",
    "@angular/platform-browser": "~11.0.3",
    "@angular/platform-browser-dynamic": "~11.0.3",
    "@angular/router": "~11.0.3",
    "@material-ui/core": "^4.11.2",
    "@ngrx/data": "^10.1.0",
    "@ngrx/effects": "^10.1.0",
    "@ngrx/entity": "^10.1.0",
    "@ngrx/router-store": "^10.1.0",
    "@ngrx/store": "^10.1.0",
    "@ngrx/store-devtools": "^10.1.0",
    "firebase": "^8.1.2",
    "jasmine": "^3.6.3",
    "rxjs": "^6.6.3",
    "tslib": "^2.0.0",
    "zone.js": "~0.10.2"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.1100.3",
    "@angular/cli": "~11.0.3",
    "@angular/compiler-cli": "~11.0.3",
    "@angular/language-service": "~11.0.3",
    "@types/node": "^12.11.1",
    "@types/jasmine": "~3.6.0",
    "@types/jasminewd2": "~2.0.3",
    "codelyzer": "^6.0.0",
    "jasmine-core": "~3.6.0",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "~5.0.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage-istanbul-reporter": "~3.0.2",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "^1.5.0",
    "protractor": "~7.0.0",
    "ts-node": "~7.0.0",
    "tslint": "~6.1.0",
    "typescript": "~4.0.5"
  }
}

I tried injecting the Flex Module into my feature module, but that didn't help. Here is my app module showing it injected.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FlexLayoutModule } from '@angular/flex-layout';
import { HttpClientModule } from '@angular/common/http';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';


// Mak Studio Modules
import { LoginModule } from './main/Common/login/login.module';
import { ProfileModule } from './main/profile/profile.module';
import { NavbarModule } from './main/Shared/navbar/navbar.module';


// Google Firebase
import { AngularFireModule } from '@angular/fire';
import { AngularFireAuthModule } from "@angular/fire/auth";
import { AngularFirestoreModule } from '@angular/fire/firestore';
import { AngularFireStorageModule } from '@angular/fire/storage';
import { environment } from '../environments/environment';


// NGRX Items
import { StoreModule } from '@ngrx/store';
import { EffectsModule } from '@ngrx/effects';
import { metaReducers, reducers } from '../app/main/store/reducers';
import { EntityDataModule } from '@ngrx/data';
import { StoreDevtoolsModule } from '@ngrx/store-devtools';
import { RouterState, StoreRouterConnectingModule } from '@ngrx/router-store';


@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    // Standard modules
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    FlexLayoutModule,
    HttpClientModule,

    // Mak modules
    LoginModule,
    NavbarModule,
    ProfileModule,


    // Firestore Auth Modules
    AngularFireModule.initializeApp(environment.firebase),
    AngularFireAuthModule,
    AngularFirestoreModule,
    AngularFireStorageModule,


    // NGRX items
    StoreModule.forRoot(reducers, {
      metaReducers,
      runtimeChecks : {
        strictStateImmutability: true,
        strictActionImmutability: true,
        strictActionSerializability: true,
        strictStateSerializability:true
      }
    }),
    StoreDevtoolsModule.instrument({maxAge: 25, logOnly: environment.production}),
    EffectsModule.forRoot([]),
    EntityDataModule.forRoot({}),
    StoreRouterConnectingModule.forRoot({
      stateKey: 'router',
      routerState: RouterState.Minimal
    }),
    StoreModule.forRoot({}, {}),
    StoreDevtoolsModule.instrument({ maxAge: 25, logOnly: environment.production })


  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }
2 Answers

You have to update all dependencies at once. Please try,npm update @angular/material @angular/flex-layout @angular/cdk

Related