angular/flex-layout 无法使用 angular 9

Question

我已经用 angular 9 、angular material 和 angular/flex-layout 设置了一个基本项目。我怎么无法让 angular/flex-layout 工作。这是我所做的

登录-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>

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

这些是我安装的包

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

每当我通过 css 将 flex 应用于 "container" class 时，它可以工作，但不适用于 angular-flex-layout。

Answer 1

尝试在声明登录视图组件的模块中导入 FlexLayoutModule

Answer 2

我认为 Angular 启用 ivy 后 flexlayout 无法正常工作。将 enableIvy 设置为 false，如下所示。

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

Answer 3

我建议您转到文件 tsconfig.app.json 并将 enableIvy 设置为 false:

"angularCompilerOptions": {
    "enableIvy": false
  }

这对我有用。

Answer 4

对于

"@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",

对我有用的完整解决方案是@nabel 和@dev0201 建议的组合 | @Dev2601 给了，也就是

添加 import { FlexLayoutModule } from '@angular/flex-layout' 并将其包含在声明组件的 @NgModule 的导入部分中。
将 "angularCompilerOptions": { "enableIvy": false } 添加到 tsconfig.app.json 文件。

应该是这样。

angular/flex-layout 无法使用 angular 9

angular/flex-layout not working with angular 9

angular

flexbox

angular-flex-layout

angular9