角度材料模块无法识别 [英] Angular Material Modules are not recognized

问题描述

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

I wasted a lot of time on this mistake, I'm starting new angular5 project and I want to use angular material. I imported and exported the material modules in a material.module.ts file:

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:

then I imported the material.module inside app.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 { }

当我也尝试使用 <mat-toolbar></mat-toolbar>我遇到了常见错误:

When I try too use <mat-toolbar> </mat-toolbar> I got the common error:

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.

更新包.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"
  }
}

我看不出哪里出错了！任何帮助将不胜感激.

I cant see where is the mistake! any help will be appreciated.

推荐答案

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

You must import the MaterialModule in every module in which the material components are used in.

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

That means that if one of the components in your MasterPageModule uses the <mat-toolbar>, you must import the material module in that module as well. It's not enough to import it in just app.module.

也不要在您的 MaterialModule 中导入 BrowserModule.改为导入 CommonModule.有关详细说明，请参阅文档.

Also do not import BrowserModule in your MaterialModule. Import CommonModule instead. See the docs for the detailed explanation.

不要在任何其他模块中导入 BrowserModule.功能模块和延迟加载模块应该导入 CommonModule.他们需要通用指令.他们不需要重新安装应用范围的提供程序.

Do not import BrowserModule in any other module. Feature modules and lazy-loaded modules should import CommonModule instead. They need the common directives. They don't need to re-install the app-wide providers.

请参阅文档详细解释.

这篇关于角度材料模块无法识别的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！