如果 X 是 Angular 组件，则验证它是该模块的一部分

Question

每当我添加新的 material directive/component:

时，我总是收到这个可怕的错误

Uncaught Error: Template parse errors:
'mat-input' is not a known element:
1. If 'mat-input' is an Angular component, then verify that it is part of this module. **(By doing what, asshole?)**
2. If 'mat-input' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

我的主模块中有这个：

import {BrowserModule} from '@angular/platform-browser';
import {NgModule} from '@angular/core';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {MatCheckboxModule, MatMenuModule, MatInput, MatInputModule} from '@angular/material';
import {AppComponent} from './app.component';
import {RoutingModule, EmptyComponent} from './routing.module';
import {SharedModule} from './shared.module';
import {RouterModule, RouterLink} from '@angular/router';
import {MatButtonModule} from '@angular/material/button';
import {MatIconModule} from '@angular/material/icon';

@NgModule({

  declarations: [
    AppHeader,
    AppComponent,
    PageNotFoundComponent,
    FooterComponent,
    EmptyComponent,
    ControlPanelComponent,
    AboutComponent,
    HomeComponent,
    ContactComponent,
  ],

  imports: [
    MatInputModule,
    MatIconModule,
    MatButtonModule,
    RouterModule,
    RouterModule,
    BrowserModule,
    MatMenuModule,
    MatButtonModule,
    MatCheckboxModule,
    BrowserAnimationsModule,
    RoutingModule,
    SharedModule
  ],

  exports: [
    RouterModule,
    RoutingModule,
    MatMenuModule
  ],

  providers: [],

  bootstrap: [
    AppComponent
  ]
})


export class AppModule {
}

这是一个共享模块，我认为它包含大部分依赖项：

import {NgModule} from '@angular/core';
import {CommonModule} from '@angular/common';
import {FlexLayoutModule} from '@angular/flex-layout';
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
import {RouterModule, Routes, RouterLink} from '@angular/router';
import {RoutingModule} from './routing.module';

import {
  MatButtonModule,
  MatIconModule,
  MatInputModule,
  MatSelectModule,
  MatMenuModule,
  MatTabsModule,
  MatToolbarModule,
} from '@angular/material';


@NgModule({

  imports: [
    RouterModule,
    RoutingModule,
    CommonModule,
    FormsModule,
    ReactiveFormsModule,
    FlexLayoutModule,
    MatButtonModule,
    MatIconModule,
    MatInputModule,
    MatSelectModule,
    MatMenuModule,
    MatTabsModule,
    MatToolbarModule,
  ],

  declarations: [],

  exports: [
    RouterModule,
    RoutingModule,
    FormsModule,
    ReactiveFormsModule,
    FlexLayoutModule,
    MatButtonModule,
    MatIconModule,
    MatInputModule,
    MatSelectModule,
    MatMenuModule,
    MatTabsModule,
    MatToolbarModule,
    MatButtonModule
  ]

})

export class SharedModule {
}

我在这里错过了什么？不清楚我需要做什么来满足所需的依赖关系。

如何验证 mat-input 是该模块的一部分？？

Answer 1

您使用以下 HTML 创建一个 Material 输入：

<mat-form-field>
    <input matInput />
</mat-form-field>

或者简单地说：

<input matInput/>

Material 中没有 <mat-input> 元素 - 导入 MatInputModule 使您可以访问 matInput 指令。

如果 X 是 Angular 组件，则验证它是该模块的一部分

If X is an Angular component, then verify that it is part of this module

angular-material2

angular5