时间戳

首页 > 解决方案 > 如何使用 Angular Material 作为核心模块

angular - 如何使用 Angular Material 作为核心模块

问题描述

我正在尝试使用 Angular Material 并遵循Angular 样式指南

查看此答案后，建议将 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后的结果表明，延迟加载的身份验证模块对 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

标签： angularangular-material2

解决方案

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

推荐阅读