J'avais mis en place un projet de base avec un 9 angulaire, un matériau angulaire et une disposition angulaire / flexible. Cependant, je ne peux pas faire fonctionner la mise en page angulaire / flexible. Voici ce que j'ai fait
Login-view.component.ts
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
login-view.component.scss
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 { }
app.module.ts
mat-form-field{ width: 100%; } .login-box{ width : 30%; } .container { // display: flex; // align-items: center; // justify-content: center; height: 100%; }
Voici les packages que j'ai installés
<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>
Chaque fois que j'utilise flex via css en l'appliquant à la classe "container", cela fonctionne mais pas avec angular-flex-layout.
4 Réponses :
Essayez d'importer le FlexLayoutModule dans le module dans lequel le composant de vue de connexion est déclaré
Je pense que le flexlayout angulaire ne fonctionne pas correctement lorsque ivy est activé. Définissez enableIvy
sur false
comme ci-dessous.
"angularCompilerOptions": { "fullTemplateTypeCheck": true, "strictInjectionParameters": true, "enableIvy": false }
Merci. Cela a fonctionné pour moi.
Je vous conseille d'aller dans le fichier tsconfig.app.json
et de définir enableIvy sur false:
"angularCompilerOptions": { "enableIvy": false }
Ça marche pour moi.
Pour
"@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",
la solution complète qui a fonctionné pour moi est la combinaison des suggestions @nabel et @ dev0201 | @ Dev2601 a donné, ce qui est
import { FlexLayoutModule } from '@angular/flex-layout'
et incluez-la dans la section importations du @NgModule
où votre composant est déclaré."angularCompilerOptions": { "enableIvy": false }
au fichier tsconfig.app.json
.Ça devrait être ça.
J'ai le même problème, quelqu'un peut-il nous aider avec ça
Hii @Tausif Êtes-vous en mesure de résoudre ce problème ...
J'ai aussi le même problème ... Pouvez-vous me suggérer s'il vous plaît.