Angular app.component. html не отображается

Question

Я учусь и проверяю Angular. Я следую учебному пособию, которое использует Angular и Material UI. Я пытаюсь отобразить Html из моего app.component. html, но в моем браузере ничего не отображается. Я получаю сообщение об ошибке, но не уверен, относится ли это к моей проблеме с отображением.

app.component. html

<mat-toolbar  color="primary"  class="fixed-header">
  <mat-toolbar-row>
  <a  mat-button  routerLink="/customer-list"  routerLinkActive="active">Customers</a>
  <a  mat-button  routerLink="/customer-create">Create Customer</a>
  <a  mat-button  routerLink="/login">Login</a>
  </mat-toolbar-row>
  </mat-toolbar>

  <main>
  <router-outlet  style="margin-top: 80px;"></router-outlet>
  </main>
<router-outlet></router-outlet>

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { LoginComponent } from './login/login.component';
import { CustomerListComponent } from './customer-list/customer-list.component';
import { CustomerListCreateComponent } from './customer-list-create/customer-list-create.component';

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { RouterModule, Routes } from '@angular/router';

import { MyMaterialModule } from './material.module';

const  appRoutes:  Routes  = [
  { path:  'customer-list', component:  CustomerListComponent },
  { path:  'customer-list-create', component:  CustomerListCreateComponent },
  {
  path:  'login',
  component:  LoginComponent
  },
  { path:  '',

  redirectTo:  '/login',

  pathMatch:  'full'

  },
  ];

@NgModule({
  declarations: [
    AppComponent,
    LoginComponent,
    CustomerListComponent,
    CustomerListCreateComponent
  ],
  imports: [
    BrowserModule,
    RouterModule.forRoot(appRoutes),
    BrowserAnimationsModule,
    MyMaterialModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Я создал файл для всех своих материалов, которые пользовательский интерфейс импортирует material.module.ts

import { NgModule } from '@angular/core';
//import { MatNativeDateModule,MatSnackBarModule,MatIconModule,MatDialogModule, MatButtonModule, MatTableModule, MatPaginatorModule , MatSortModule,MatTabsModule, MatCheckboxModule, MatToolbarModule, MatCard, MatCardModule, MatFormField, MatFormFieldModule, MatProgressSpinnerModule, MatInputModule } from  '@angular/material';
import {MatDatepickerModule} from  '@angular/material/datepicker';
import {MatRadioModule} from  '@angular/material/radio';
import {MatSelectModule} from  '@angular/material/select';
import {MatSliderModule} from  '@angular/material/slider';
import {MatDividerModule} from  '@angular/material/divider';
import { MatToolbarModule } from '@angular/material/toolbar';
import { MatCard } from '@angular/material/card';
import {MatCardModule} from '@angular/material/card';

@NgModule({
    imports: [MatCardModule,MatCard,MatToolbarModule,MatDividerModule,MatSliderModule,MatSelectModule,MatRadioModule,MatDatepickerModule],
    exports: [MatCardModule,MatCard,MatToolbarModule,MatDividerModule,MatSliderModule,MatSelectModule,MatRadioModule,MatDatepickerModule],

})

export class MyMaterialModule {}

это ошибка, которую я получаю в браузере

core.js:35439 Uncaught TypeError: Cannot read property 'id' of undefined
    at registerNgModuleType (core.js:35439)
    at core.js:35457
    at Array.forEach (<anonymous>)
    at registerNgModuleType (core.js:35453)
    at core.js:35457
    at Array.forEach (<anonymous>)
    at registerNgModuleType (core.js:35453)
    at new NgModuleFactory$1 (core.js:35621)
    at compileNgModuleFactory__POST_R3__ (core.js:41375)
    at PlatformRef.bootstrapModule (core.js:41740)

Я не уверен, почему мой app.compnent. html не рендерит

Answer 1

Вы не можете добавить MatCard в imports или exports массив, потому что это не Angular модуль

import { MatCardModule, MatToolbarModule, MatDividerModule, MatSliderModule, MatSelectModule, MatRadioModule, MatDatepickerModule } from '@angular/material';

@NgModule({
  imports: [MatCardModule, MatToolbarModule, MatDividerModule, MatSliderModule, MatSelectModule, MatRadioModule, MatDatepickerModule],
  exports: [MatCardModule, MatToolbarModule, MatDividerModule, MatSliderModule, MatSelectModule, MatRadioModule, MatDatepickerModule]
})

export class MyMaterialModule {
}

Из вывода в консоли вы также можно проверить, что ошибка произошла при регистрации модуля в массиве imports с помощью registerNgModuleType

core.js:35439 Uncaught TypeError: Cannot read property 'id' of undefined
    at registerNgModuleType (core.js:35439)