Quantcast
Channel: Active questions tagged flexbox - Stack Overflow
Viewing all articles
Browse latest Browse all 1326

FlexLayoutModule not working with Angular 11

$
0
0

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 { }

Viewing all articles
Browse latest Browse all 1326

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>