Angular 6 'mat-button-toggle' is not a known element

问题:

I've checked those questions:

• 'mat-toolbar' is not a known element - Angular 5
• Jhipster / md-button is not a known element
• Template parse errors: 'mat-icon' is not a known element
• Meterial 2 md-datepicker-toggle is not a known element
• How to bind to model with Angular Material <mat-button-toggle>?

and I've followed this tutorial:

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

and previously I've used Angular Material, but for this it just won't work:

compiler.js:1016 Uncaught Error: Template parse errors: 'mat-button-toggle' is not a known element: 1. If 'mat-button-toggle' is an Angular component, then verify that it is part of this module.

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 { } 

(here I am just trying to add those buttons even without real functionality)

....

  <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; } 

回答1:

mat-button-toggle is available as a part of the MatButtonToggleModule So you'll have to import that as well.

Add an import statement for the same in your AppModule:

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

And then add it to the imports array as well so that AppModule's templates can understand what mat-button-toggle is.

Also, I'm not really sure why you've exported these modules from your AppModule. We generally export anything from a module if we are planning on importing that module in some other module. But since this is the AppModule, and thus your RootModule, I don't think you'll be importing it in any other module. That might not be the case though.

文章来源: Angular 6 'mat-button-toggle' is not a known element