Угловые метки 4 материала не определены

Question

Я пытаюсь использовать степлер Angular Material, изучив документацию, но когда я вставляю тег HTML Material Stepper в мое приложение Angular, он говорит мне, что это не известный элемент.

HTML:

<mat-horizontal-stepper [linear]="isLinear" 
#stepper="matHorizontalStepper">
<mat-step [stepControl]="firstFormGroup">
<form [formGroup]="firstFormGroup">
<ng-template matStepLabel>Fill out your name</ng-template>
<mat-form-field>
<input matInput placeholder="Last name, First name" 
formControlName="firstCtrl" required>
</mat-form-field>
<div>
<button mat-button matStepperNext>Next</button>
</div>
</form>
</mat-step>
<mat-step [stepControl]="secondFormGroup">
<form [formGroup]="secondFormGroup">
<ng-template matStepLabel>Fill out your address</ng-template>
<mat-form-field>
<input matInput placeholder="Address" formControlName="secondCtrl" 
required>
</mat-form-field>
<div>
<button mat-button matStepperPrevious>Back</button>
<button mat-button matStepperNext>Next</button>
</div>
</form>
</mat-step>
<mat-step>
<ng-template matStepLabel>Done</ng-template>
You are now done.
<div>
<button mat-button matStepperPrevious>Back</button>
<button mat-button (click)="stepper.reset()">Reset</button>
</div>
</mat-step>
</mat-horizontal-stepper>

Компонент ТС:

import {FormBuilder, FormGroup, Validators} from '@angular/forms';
import {MatStepperIntl, MatStepperModule} from '@angular/material';

export class AddSchoolComponent implements OnInit {


isLinear = false;
firstFormGroup: FormGroup;
secondFormGroup: FormGroup;

constructor(
          private _formBuilder: FormBuilder,
          ) {}

ngOnInit() {
this.firstFormGroup = this._formBuilder.group({
  firstCtrl: ['', Validators.required]
});
this.secondFormGroup = this._formBuilder.group({
  secondCtrl: ['', Validators.required]
});
}
}

Приложение TS:

import {MatButtonModule, MatCheckboxModule} from '@angular/material';
import {FormBuilder, FormGroup, Validators} from '@angular/forms';
import {MatStepperModule} from '@angular/material';
import {MatStepperIntl} from '@angular/material';
import {CdkTableModule} from '@angular/cdk/table';

imports: [
MatStepperModule,
NoopAnimationsModule,
BrowserAnimationsModule,
MatButtonModule, MatCheckboxModule,],
providers: [ MatStepperModule,
MatStepperIntl,
 {provide: MatStepperIntl, useClass: MyIntl},
],

Говорит мне, в модуле приложения не может найти имя MyIntl.

Сообщение об ошибке в консоли:

'mat-form-field' не является известным элементом: 1. Если 'mat-form-field' является угловым компонентом, то убедитесь, что он является частью этого модуля. 2. Если 'mat-form-field' является веб-компонентом, то добавьте 'CUSTOM_ELEMENTS_SCHEMA' к '@NgModule.schemas' этого компонента, чтобы подавить это сообщение. ("FormGroup]="firstFormGroup">

Мне нужна помощь, чтобы понять, почему модуль приложения не может идентифицировать класс MyIntl и почему теги stepper не известны в моем HTML.

ссылка, по которой я следовал инструкциям:

Ссылка на документацию

Answer 1

Вы должны импортировать { MatFormFieldModule } от "@angular/material"; import { MatInputModule } от "@angular/material"; в app.ts

Answer 2

Проблема заключалась в том, что я использовал Angular начальной загрузки с материалом Angular, они не работают друг с другом, поэтому он никогда не работал со мной. Надеюсь, это кому-нибудь поможет.

Answer 3

Импортировать это все и проверить
импорт { MatAutocompleteModule, MatButtonModule, MatButtonToggleModule, MatPaginatorModule, MatCardModule, MatCheckboxModule, MatChipsModule, MatDatepickerModule, MatDialogModule, MatDividerModule, MatGridListModule, MatIconModule, MatInputModule, MatListModule, MatMenuModule, MatProgressBarModule, MatProgressSpinnerModule, MatRadioModule, MatSelectModule, MatSidenavModule, MatSliderModule, MatSortModule, MatSlideToggleModule, MatSnackBarModule, MatTableModule, MatTabsModule, MatToolbarModule, MatTooltipModule, MatFormFieldModule, MatExpansionModule, MatStepperModule, MatDatepicker,MatNativeDateModule } из '@angular/material';

@NgModule({
  exports: [
    CdkTableModule,
    MatAutocompleteModule,
    MatButtonModule,
    MatButtonToggleModule,
    MatCardModule,
    MatCheckboxModule,
    MatChipsModule,
    MatDatepickerModule,
    MatDialogModule,
    MatDividerModule,
    MatExpansionModule,
    MatFormFieldModule,
    MatGridListModule,
    MatIconModule,
    MatInputModule,
    MatListModule,
    MatMenuModule,
    MatProgressBarModule,
    MatProgressSpinnerModule,
    MatRadioModule,
    MatSelectModule,
    MatSlideToggleModule,
    MatSliderModule,
    MatSidenavModule,
    MatSnackBarModule,
    MatStepperModule,
    MatTabsModule,
    MatToolbarModule,
    MatTooltipModule,
    MatPaginatorModule,
    MatSortModule,
    MatTableModule,
    MatDatepickerModule,
    MatNativeDateModule
  ]
})

Answer 4

Пожалуйста, обратите внимание, что модули (такие как MatButtonModule, BrowserModule и т. д.) должны быть импортированы в модуль вашего приложения, а не в ваши компоненты.

Пожалуйста, прочтите документацию по Angular, прежде чем начать работу с Angular. Вы также можете проверить вкладку API для необходимого оператора импорта (и модуля, который вам нужен для работы компонента Material, который вы хотите использовать)

(PS Я рекомендую использовать функциональный модуль для компонентов материалов.)

material.module.ts:

import { NgModule } from '@angular/core';
import { MatStepperModule } from '@angular/material/stepper';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/input';
import { MatButtonModule } from '@angular/material/button';

@NgModule({
  exports: [
    MatButtonModule,
    MatFormFieldModule,
    MatInputModule,
    MatStepperModule
  ]
})
export class MaterialModule {}

app.module.ts:

import { MaterialModule } from './material.module';
import { NgModule } from '@angular/core';
// etc.

@NgModule({
  imports: [
    MaterialModule,
    // etc.
  ]
})
export class AppModule { }