Как использовать угловой материал в качестве основного модуля - PullRequest
Новая
       11

Как использовать угловой материал в качестве основного модуля

0 голосов
/ 17 февраля 2019

Я пытаюсь использовать угловой материал и следую Руководству по угловым стилям

После рассмотрения этого ответа рекомендуется использовать угловой материал в качестве основного модуля..

, поэтому, зная следующие правила:

Избегайте импорта CoreModule в любое место, кроме AppModule.

Лениво загруженный функциональный модуль, который напрямую импортирует 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 показывает, что Ленивый загруженный модуль аутентификации незнать что-нибудь об Угловом материале 

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
...