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

问题描述

我在这个错误上浪费了很多时间，我正在开始新的angular5项目，我想使用角度材料. 我在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 { }

然后我将material.module导入app.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> I时，出现了常见错误:

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.

更新 package.Json

Update 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"
  }
}

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

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中的组件之一使用<mat-toolbar>，则还必须将材料模块导入该模块中.仅将其导入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屋！