Angular 无法识别角材料模块

我在这个错误上浪费了很多时间，我正在开始新的angular5项目，我想使用angular5材质。 我在material.module.ts文件中导入和导出了材质模块：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { CommonModule } from '@angular/common';
import { MatIconModule,MatButtonModule,MatSidenavModule,MatToolbarModule } from '@angular/material';

@NgModule({
  imports: [
    BrowserModule,
    CommonModule,
    MatIconModule,
    MatButtonModule,
    MatSidenavModule,
    MatToolbarModule,

  ],
  exports: [
    MatIconModule,
    MatButtonModule,
    MatSidenavModule,
    MatToolbarModule
  ],
  declarations: []
})
export class MaterialModule { }

然后我在app.module中导入了material.module：

import { BrowserModule } from '@angular/platform-browser';
import { CommonModule } from '@angular/common';

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

import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { FlexLayoutModule } from "@angular/flex-layout";
import { MasterPageModule } from './master-page/master-page.module';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MaterialModule } from './material.module';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    CommonModule,
    AppRoutingModule,
    FormsModule,
    HttpModule,
    BrowserAnimationsModule,
    FlexLayoutModule,
    MasterPageModule,
    MaterialModule

  ],
  providers: [],
  bootstrap: [AppComponent],

})
export class AppModule { }

当我尝试过使用

时，我

遇到了常见错误：

Template parse errors:'mat-toolbar' is not a known element:
1. If 'mat-toolbar' is an Angular component, then verify that it is part of this module.
2. If 'mat-toolbar' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

更新 package.Json

{
  "name": "front-end-app",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build --prod",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^5.2.9",
    "@angular/cdk": "^5.2.4",
    "@angular/common": "^5.2.0",
    "@angular/compiler": "^5.2.0",
    "@angular/core": "^5.2.0",
    "@angular/flex-layout": "^5.0.0-beta.14",
    "@angular/forms": "^5.2.0",
    "@angular/http": "^5.2.0",
    "@angular/material": "^5.2.4",
    "@angular/platform-browser": "^5.2.0",
    "@angular/platform-browser-dynamic": "^5.2.0",
    "@angular/router": "^5.2.0",
    "core-js": "^2.4.1",
    "hammerjs": "^2.0.8",
    "rxjs": "^5.5.6",
    "zone.js": "^0.8.19"
  },
  "devDependencies": {
    "@angular/cli": "~1.7.4",
    "@angular/compiler-cli": "^5.2.0",
    "@angular/language-service": "^5.2.0",
    "@types/jasmine": "~2.8.3",
    "@types/jasminewd2": "~2.0.2",
    "@types/node": "~6.0.60",
    "codelyzer": "^4.0.1",
    "jasmine-core": "~2.8.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~2.0.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "^1.2.1",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.1.2",
    "ts-node": "~4.1.0",
    "tslint": "~5.9.1",
    "typescript": "~2.5.3"
  }
}

---

我看不出哪里出了错！如有任何帮助，我们将不胜感激。

您必须在使用材料组件的每个模块中导入

材料模块

这意味着，如果
MasterPageModule
中的一个组件使用
，则您也必须导入该模块中的物料模块。仅在
app.module
中导入是不够的

也不要在
MaterialModule
中导入
BrowserModule
。改为导入公共模块。有关详细说明，请参见

请勿在任何其他模块中导入BrowserModule。功能模块和延迟加载模块应改为导入CommonModule。他们需要共同的指令。他们不需要重新安装应用程序范围的提供商

有关详细说明，请参阅。
您的代码对我适用。你的package.json怎么样？@bugs我更新了问题，请看package.jsontanks，我删除了BrowserModule，但出于测试目的，我将其放入app.component.html中，但仍然无法工作，我认为这意味着我的应用程序无法识别材料模块。我也发布了我的package.json，请看一看。一切正常，尝试删除package-lock.json、node_模块并再次运行
npm install
。非常感谢：）。很高兴我能帮忙：）