Как использовать угловой / материал версии 7.0.1 в моем проекте?

Question

Я начинаю изучать Angular с помощью Google Material Design, и пока все хорошо, я создаю свое интерфейсное приложение с официальной документацией с https://angular.io/tutorial и https://material.angular.io/guides сайтов.

Я прочитал аналогичный вопрос , но это не сработает для меня, мое приложение использует Angular 7.0.0 с Angular Material 7.0.0.

ТакЯ хочу использовать большинство Угловых Материальных Компонентов в моем демонстрационном приложении, и это лучший способ получить их все.

Я прочитал много статей и учебных пособий, таких как Начало работы с Angular Material 2 или этот , но во всех из них они просто используют базовые компоненты или учебник о старой версии Angular Material, а текущая официальная документация не предоставляетсписок доступных компонентов для импорта для текущей версии и как использовать эти компоненты по пути?

Мой app.module.ts с базовым компонентом: (обновленный код)

// angular component and 
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule, ReactiveFormsModule } from "@angular/forms";

// my components
import { AppComponent } from './app.component';
import { HeaderComponent } from './header/header.component';
import { FooterComponent } from './footer/footer.component';
import { NavigationComponent } from "./header/navigation/navigation.component";
import { ContainerComponent } from './container/container.component';
import { NavComponent } from './nav/nav.component';


// add animaitons for material 
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
// add CDK layout for material
import { LayoutModule } from "@angular/cdk/layout";
// add material to module
import { MaterialModule } from "./class/material.module"

@NgModule({
  imports: [
    BrowserModule,
    FormsModule, ReactiveFormsModule,
    BrowserAnimationsModule,
    LayoutModule,
    MaterialModule
  ],
  declarations: [
    AppComponent,
    HeaderComponent,
    FooterComponent,
    NavigationComponent,
    ContainerComponent,
    NavComponent
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

Я нахожу этот код в аналогичный вопрос , но когда я добавляю его в отдельный файл и затем импортирую в app.module.ts, мое приложение перестает работать, и я просто вижу сообщение о загрузке в браузере. (обновленный код)

import { NgModule } from "@angular/core";

import { 
  MatButtonModule, 
  MatToolbarModule, 
  MatSidenavModule, 
  MatCheckboxModule,
  MatIconModule,
  MatListModule
 } from "@angular/material";
@NgModule({
  imports: [
    MatButtonModule,
    MatToolbarModule,
    MatSidenavModule,
    MatCheckboxModule,
    MatIconModule,
    MatListModule
  ],
  exports: [
    MatButtonModule,
    MatToolbarModule,
    MatSidenavModule,
    MatCheckboxModule,
    MatIconModule,
    MatListModule
  ]
})
export class MyMaterialModule {}

(обновлено) Пока я просто исправляю material.module.ts в своей папке с классами, но все же не могудобавить другие компоненты.как следующие компоненты:

import {
  MatNativeDateModule,
  MatSnackBarModule,
  MatDialogModule,
  MatTableModule,
  MatPaginatorModule,
  MatSortModule,
  MatTabsModule,
  MatCheckboxModule,
  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";

Answer 1

Вам необходимо использовать модуль comman при использовании отдельного файла:

1] material.module.ts

 import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { CdkTableModule } from '@angular/cdk/table';
import { CdkTreeModule } from '@angular/cdk/tree';

import {
  MatAutocompleteModule,
  MatBadgeModule,
  MatBottomSheetModule,
  MatButtonModule,
  MatButtonToggleModule,
  MatCardModule,
  MatCheckboxModule,
  MatChipsModule,
  MatDatepickerModule,
  MatDialogModule,
  MatDividerModule,
  MatExpansionModule,
  MatGridListModule,
  MatIconModule,
  MatInputModule,
  MatListModule,
  MatMenuModule,
  MatNativeDateModule,
  MatPaginatorModule,
  MatProgressBarModule,
  MatProgressSpinnerModule,
  MatRadioModule,
  MatRippleModule,
  MatSelectModule,
  MatSidenavModule,
  MatSliderModule,
  MatSlideToggleModule,
  MatSnackBarModule,
  MatSortModule,
  MatStepperModule,
  MatTableModule,
  MatTabsModule,
  MatToolbarModule,
  MatTooltipModule,
  MatTreeModule
} from '@angular/material';

@NgModule({
  exports: [
    CdkTableModule,
    CdkTreeModule,
    MatAutocompleteModule,
    MatBadgeModule,
    MatBottomSheetModule,
    MatButtonModule,
    MatButtonToggleModule,
    MatCardModule,
    MatCheckboxModule,
    MatChipsModule,
    MatStepperModule,
    MatDatepickerModule,
    MatDialogModule,
    MatDividerModule,
    MatExpansionModule,
    MatGridListModule,
    MatIconModule,
    MatInputModule,
    MatListModule,
    MatMenuModule,
    MatNativeDateModule,
    MatPaginatorModule,
    MatProgressBarModule,
    MatProgressSpinnerModule,
    MatRadioModule,
    MatRippleModule,
    MatSelectModule,
    MatSidenavModule,
    MatSliderModule,
    MatSlideToggleModule,
    MatSnackBarModule,
    MatSortModule,
    MatTableModule,
    MatTabsModule,
    MatToolbarModule,
    MatTooltipModule,
    MatTreeModule
  ],
  imports: [CommonModule],
  declarations: []
})
export class MaterialModule {}

app.module.ts

import {BrowserModule} из '@ angular / platform-browser';

import {NgModule} из '@ angular / core';

импорт {CommonModule} из '@ angular / common';

импорт {NgForm, ReactiveFormsModule} из '@ angular / forms';

import {
  HttpClient,
  HTTP_INTERCEPTORS,
  HttpClientModule
} from '@angular/common/http';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MaterialModule } from './material/material.module';
import { AppComponent } from './app.component';
import { HeaderComponent } from './header/header.component';
import { FooterComponent } from './footer/footer.component';
import { NavigationComponent } from "./header/navigation/navigation.component";
import { ContainerComponent } from './container/container.component';
import { NavComponent } from './nav/nav.component';
import { LayoutModule } from "@angular/cdk/layout";
@NgModule({
  declarations: [
   AppComponent,
    HeaderComponent,
    FooterComponent,
    NavigationComponent,
    ContainerComponent,
    NavComponent,
    NgForm
  ],
  imports: [
    CommonModule,
    MaterialModule,
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    ReactiveFormsModule,
    HttpClientModule,
LayoutModule
  ],
  providers: [ ],
  bootstrap: [AppComponent]
})
export class AppModule { }