angular/flex-layout not working with Angular 9

Question

I had setup a basic project with angular 9 , angular material and angular/flex-layout. How ever I cannot get angular/flex-layout working . Here is what I have done

Login-view.component.ts

<div class="container"  fxLayout="row" fxLayoutAlign="center center" >

  <mat-card class="login-box">
    <mat-card-title>Login</mat-card-title>
    <mat-card-content>
      <form #loginForm="ngForm" (ngSubmit)="login(loginForm)">
        <p>
          <mat-form-field>
            <input type="text" name="username" matInput placeholder="Username" ngModel required />
          </mat-form-field>
        </p>

        <p>
          <mat-form-field>
            <input type="password" name="password" matInput placeholder="Password" ngModel required />
          </mat-form-field>
        </p>
        <div class="button">
          <button type="submit" mat-button>Login</button>
        </div>
      </form>
    </mat-card-content>
  </mat-card>

</div>

login-view.component.scss

mat-form-field{
    width: 100%;
}

.login-box{
    width : 30%;
}

.container {
//     display: flex;
//     align-items: center;
//     justify-content: center;
    height: 100%;
}

app.module.ts

import { reducers } from './ngrx/app-reducer';
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MaterialModule } from './material/material.module';
import { CoreModule } from './core/core.module';
import { State, StoreModule } from '@ngrx/store';
import { environment } from 'src/environments/environment';
import { StoreDevtoolsModule  } from '@ngrx/store-devtools';
import { EffectsModule } from '@ngrx/effects';
import { StoreRouterConnectingModule, RouterState } from '@ngrx/router-store';
import { metaReducers } from './ngrx/app-reducer'
import { AuthModule } from './features/auth/auth.module';
import { FlexLayoutModule } from '@angular/flex-layout';

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [  
    CoreModule,
    AuthModule,
    AppRoutingModule,
    MaterialModule,
    BrowserModule,
    BrowserAnimationsModule,
    FlexLayoutModule,
    StoreModule.forRoot(
      reducers, { 
        metaReducers,
        runtimeChecks:{
          strictStateImmutability:true,
          strictActionImmutability: true,
          strictActionSerializability:true,
          strictStateSerializability: true
        } 
      }
    ),
    StoreDevtoolsModule.instrument({ maxAge: 25, logOnly: environment.production }),
    // this is going to initialize the global services for ngrx and add them to the application
    EffectsModule.forRoot([]),
    StoreRouterConnectingModule.forRoot({
      stateKey: 'router',
      routerState:RouterState.Minimal
    })
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

These are the packages I have installed

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.900.6
@angular-devkit/build-angular     0.900.6
@angular-devkit/build-optimizer   0.900.6
@angular-devkit/build-webpack     0.900.6
@angular-devkit/core              9.0.6
@angular-devkit/schematics        9.0.6
@angular/cdk                      9.1.2
@angular/flex-layout              9.0.0-beta.29
@angular/material                 9.1.2
@ngtools/webpack                  9.0.6
@schematics/angular               9.0.6
@schematics/update                0.900.6
rxjs                              6.5.4
typescript                        3.7.5
webpack                           4.41.2

Whenever i Use flex via css by applying it to the "container" class it works but not with angular-flex-layout.

I have the same issue can someone help us with this

Vijay
– Vijay

2020-07-05 18:48:54 +00:00
Commented Jul 5, 2020 at 18:48 — Vijay
– Vijay, Commented Jul 5, 2020 at 18:48
Hii @Tausif Are you able to solve this issue...

Aakankshi Gupta
– Aakankshi Gupta

2020-07-14 10:11:43 +00:00
Commented Jul 14, 2020 at 10:11 — Aakankshi Gupta
– Aakankshi Gupta, Commented Jul 14, 2020 at 10:11
I am also having the same issue..Can you please suggest me.

Aakankshi Gupta
– Aakankshi Gupta

2020-07-14 10:12:10 +00:00
Commented Jul 14, 2020 at 10:12 — Aakankshi Gupta
– Aakankshi Gupta, Commented Jul 14, 2020 at 10:12

Nabel · Accepted Answer · 2020-03-21 20:00:28Z

6

Try importing the FlexLayoutModule in the module that the login-view component is declared

answered Mar 21, 2020 at 20:00

Nabel

1,95617 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Mehdi Benmoha Over a year ago

Import and export FlexLayoutModule in your SharedModule then import the SharedModule in the feature module (Login here) check this article about SharedModule for more details medium.com/@benmohamehdi/…

pzaenger · Accepted Answer · 2020-09-01 15:21:30Z

1

I think Angular flexlayout is not working properly when ivy is enabled. Set enableIvy to false like below.

"angularCompilerOptions": 
{ 
  "fullTemplateTypeCheck": true, 
  "strictInjectionParameters": true, 
  "enableIvy": false 
}

edited Sep 1, 2020 at 15:21

pzaenger

12.1k3 gold badges48 silver badges55 bronze badges

answered Sep 1, 2020 at 15:09

dev0201

834 bronze badges

Comments

Adrian Mole · Accepted Answer · 2020-09-19 19:16:09Z

1

I advise you to go to the file tsconfig.app.json and set enableIvy to false:

"angularCompilerOptions": {
    "enableIvy": false
  }

That works for me.

edited Sep 19, 2020 at 19:16

Adrian Mole

52.1k193 gold badges61 silver badges101 bronze badges

answered Sep 19, 2020 at 13:10

Dev2601

111 bronze badge

Comments

theshinylight · Accepted Answer · 2020-11-24 09:51:43Z

For

"@angular/animations": "~9.1.0",
"@angular/cdk": "^9.2.0",
"@angular/common": "~9.1.0",
"@angular/compiler": "~9.1.0",
"@angular/core": "~9.1.0",
"@angular/flex-layout": "^9.0.0-beta.31",
"@angular/forms": "~9.1.0",
"@angular/material": "^9.2.0",
"@angular/platform-browser": "~9.1.0",
"@angular/platform-browser-dynamic": "~9.1.0",
"@angular/router": "~9.1.0",

the complete solution that worked for me is the combination of the suggestions @nabel and @dev0201 | @Dev2601 gave, which is

Add import { FlexLayoutModule } from '@angular/flex-layout' and include it in the imports section of the @NgModule where your component is declared.
Add "angularCompilerOptions": { "enableIvy": false } to the tsconfig.app.json file.

This should be it.

live-love · Accepted Answer · 2022-08-24 20:44:00Z

0

Make sure you have it imported in package.json:

"@angular/flex-layout": "^14.0.0-beta.40",

If not, install it:

npm install @angular/flex-layout

answered Aug 24, 2022 at 20:44

live-love

53.1k27 gold badges257 silver badges220 bronze badges

Collectives™ on Stack Overflow

angular/flex-layout not working with Angular 9

5 Answers 5

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related