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 Modulesimport { LoginModule } from './main/Common/login/login.module';import { ProfileModule } from './main/profile/profile.module';import { NavbarModule } from './main/Shared/navbar/navbar.module';// Google Firebaseimport { 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 Itemsimport { 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 { }