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

Question

I keep getting this horrible error whenever I add a new 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.

I have this in my main module:

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

And this is a shared module, which I believe houses most dependencies:

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

what am I missing here? It's so unclear what I need to do to satisfy the dependencies needed.

How do I verify that mat-input is part of this module??

Solution

You create a Material input with the following HTML:

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

Or simply:

<input matInput/>

There is no <mat-input> element in Material - the MatInputModule is imported to give you access to the matInput directive.