Question

我正在尝试使用Angular Material并遵循Angular style guide

在审查this answer之后，建议将Angular Material作为核心模块。

所以知道以下规则：

避免在AppModule之外的任何地方导入CoreModule。

直接导入CoreModule的延迟加载的功能模块将创建其自己的服务副本，并且可能会产生不良结果。

我编写了以下代码：

材料模块：

import { NgModule, Optional, SkipSelf } from '@angular/core';

import { NoopAnimationsModule } from '@angular/platform-browser/animations';
import { MatButtonModule } from '@angular/material';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/input';
import { MatSelectModule } from '@angular/material/select';
import { MatToolbarModule } from '@angular/material/toolbar';

import { throwIfAlreadyLoaded } from '@demo/shared/guards';

const materialModules: any = [
  MatFormFieldModule,
  MatInputModule,
  MatSelectModule,
  MatButtonModule,
  MatToolbarModule,
]
@NgModule({
  imports: [
    NoopAnimationsModule,
    materialModules
  ],
  exports: [
    materialModules
  ]
})
export class SharedMaterialModule {
  constructor(@Optional() @SkipSelf() parentModule: SharedMaterialModule) {
    throwIfAlreadyLoaded(parentModule, 'SharedMaterialModule');
  }
}

应用模块

import { NgModule } from '@angular/core';
import { SharedMaterialModule } from '@demo/shared/material';
import { RouterModule } from '@angular/router';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [
    SharedMaterialModule,
    RouterModule.forRoot(
      [
        {
          path: 'auth',
          loadChildren: '@demo/shared/auth#AuthModule'
        }
      ],
      { initialNavigation: 'enabled' }
    ),
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

延迟加载的身份验证模块：

import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { CommonModule } from '@angular/common';
import { ReactiveFormsModule } from '@angular/forms';

import { LoginComponent } from './login/login.component';

@NgModule({
  imports: [
      CommonModule,
      ReactiveFormsModule,

    RouterModule.forChild([
      {
        path: '',
        component: LoginComponent
      }
    ]),
  ],
  providers: [AuthService],
  declarations: [LoginComponent]
})
export class AuthModule {}

，但是导航到 / auth 后的结果表明，延迟加载的auth模块对Angular Material一无所知

ERROR Error: Uncaught (in promise): Error: Template parse errors:
'mat-form-field' is not a known element:
1. If 'mat-form-field' is an Angular component, then verify that it is part of this module.
2. If 'mat-form-field' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("[formGroup]="loginForm" (ngSubmit)="login.emit(loginForm.value)">
    <div class="container">
      [ERROR ->]<mat-form-field>
        <input
          matInput
"): ng:///AuthModule/LoginComponent.html@11:6

Answer 1

我建议创建一个共享模块，以导入Material模块。另一方面，任何与Material素材一起使用的功能模块都应仅导入共享模块。而已。但是，根据您的情况，您的功能AuthModule无法访问AppModule及其导入的内容。通常，我创建Core模块，该模块一次在根AppModule中导入，而在其他任何地方都导入。因此，核心模块由服务和单例应用程序级组件（例如导航栏等）组成。

如何使用角材料作为核心模块

1 个答案: