Угловой 6 'mat-button-toggle' не известен

Question

Я проверил эти вопросы:

• 'mat-toolbar' - неизвестный элемент - Угловой 5
• Jhipster / md-button не является известным элементом
• Ошибки синтаксического анализа шаблона: 'mat-icon' не известен элемент
• Meterial 2 md-datepicker-toggle не известен элемент
• Как связать модель с угловым материалом ?

и я следовал этому уроку:

• https://material.angular.io/components/button-toggle/overview

и ранее я использовал Angular Material, но для этого он просто не будет работать:

compiler.js: 1016 Uncaught Error: Ошибки разбора шаблона: 'mat-button-toggle' не является известным элементом: 1. Если 'mat-button-toggle' является угловым компонентом, убедитесь, что он является частью этого модуля.

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { TRANSLATION_PROVIDERS } from './translations';
import { TranslateService } from './services/translator.service';
import { AppComponent } from './app.component';
import { MatButtonModule, MatCheckboxModule, MatFormFieldModule, MatInputModule, MatRippleModule, MatDatepickerModule, MatNativeDateModule } from '@angular/material';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { FormsModule } from '@angular/forms';

import { ReactiveFormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';


@NgModule({
  imports: [
    BrowserModule,
    FormsModule,
    MatButtonModule,
    MatCheckboxModule,
    MatFormFieldModule,
    MatInputModule,
    MatRippleModule,
    BrowserAnimationsModule,
    MatDatepickerModule,
  ],
  exports: [
    BrowserModule,
    FormsModule,
    MatButtonModule,
    MatCheckboxModule,
    MatFormFieldModule,
    MatInputModule,
    MatRippleModule,
    BrowserAnimationsModule,
    MatDatepickerModule,
  ],
  declarations: [AppComponent],
  providers: [TRANSLATION_PROVIDERS, TranslateService],
  bootstrap: [AppComponent]
})
export class AppModule { }

(здесь я просто пытаюсь добавить эти кнопки даже без реальной функциональности)

....

  <div>
      <mat-button-toggle-group name="fontStyle" aria-label="Font Style">
          <mat-button-toggle value="bold">Bold</mat-button-toggle>
          <mat-button-toggle value="italic">Italic</mat-button-toggle>
          <mat-button-toggle value="underline">Underline</mat-button-toggle>
        </mat-button-toggle-group>
  </div>

...

styles.css

@import '~@angular/material/prebuilt-themes/deeppurple-amber.css';

body { 
  font-family: Roboto, Arial, sans-serif;
  margin: 0;
}

.basic-container {
  padding: 30px;
}

.version-info {
  font-size: 8pt;
  float: right;
}

html, body { height: 100%; }
body { margin: 0; font-family: 'Roboto', sans-serif; }

Answer 1

mat-button-toggle доступен как часть MatButtonToggleModule Так что вам также придется импортировать его.

Добавить оператор импорта для того же самого в вашем AppModule:

import {MatButtonToggleModule} from '@angular/material/button-toggle';

А затем добавьте его в массив imports, чтобы шаблоны AppModule могли понять, что такое mat-button-toggle.

Кроме того, я не совсем уверен, почему вы экспортировали эти модули из вашего AppModule. Обычно мы экспортируем что-либо из модуля, если мы планируем импортировать этот модуль в какой-то другой модуль. Но так как это AppModule и, следовательно, ваш RootModule, я не думаю, что вы будете импортировать его в любой другой модуль. Это может быть не так.