'mat-expansion-panel' 不是已知元素

Question

我目前正在使用这个 Angular 模块 Material Expansion Panel，它在本地运行良好，但是当我尝试在 prod 中构建它时，它会抛出这个错误：

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

我真的不知道该怎么做才能忽略此消息，因为我的 AppModule 中已经有“CUSTOM_ELEMENTS_SCHEMA”。

这是我的扩展面板代码：

            <mat-accordion class="card">
            <mat-expansion-panel hideToggle>
              <mat-expansion-panel-header class="card-header">
                <i class="fa fa-thermometer-three-quarters fa-lg" aria-hidden="true" style="padding-top:5px;  color: Tomato;"></i> 
                <mat-panel-title> 
                 <b> How to choose the criticality level</b>
                </mat-panel-title>
                <mat-panel-description>
                  Summary table
                </mat-panel-description>
              </mat-expansion-panel-header>
              <p><img src="../../../../assets/level.png" width="900px"></p>
            </mat-expansion-panel>

我的 package.json（出于兼容性原因，我无法更新包）：

    {
  "name": "HomeFront",
  "version": "1.1.2",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build --prod&& node versionManagement.js",
    "build:local": "ng build --prod",
    "test:w": "ng test --watch --browsers=Chrome --source-map=false",
    "test": "ng test --source-map=false --code-coverage --source-map=false",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "compodoc": "./node_modules/.bin/compodoc -p src/tsconfig.app.json"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "6.0.0",
    "@angular/cdk": "^6.0.0",
    "@angular/common": "^6.0.0",
    "@angular/compiler": "6.0.0",
    "@angular/compiler-cli": "6.0.0",
    "@angular/core": "6.0.0",
    "@angular/forms": "^6.0.0",
    "@angular/http": "6.0.0",
    "@angular/material": "^6.0.0",
    "@angular/platform-browser": "6.0.0",
    "@angular/platform-browser-dynamic": "6.0.0",
    "@angular/platform-server": "6.0.0",
    "@angular/router": "6.0.0",
    "@ng-bootstrap/ng-bootstrap": "2.0.0",
    "angular-material-expansion-panel": "^0.7.2",
    "bootstrap": "4.0.0",
    "core-js": "2.6.12",
    "font-awesome": "4.7.0",
    "ngx-toastr": "^13.2.0",
    "rxjs": "^6.1.0",
    "rxjs-compat": "6.1.0",
    "zone.js": "0.8.26"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.6.0",
    "@angular/cli": "6.0.0",
    "@compodoc/compodoc": "^1.1.14",
    "@types/jasmine": "2.5.53",
    "@types/jasminewd2": "2.0.2",
    "@types/node": "6.0.60",
    "codelyzer": "^4.2.1",
    "jasmine-core": "2.6.2",
    "jasmine-spec-reporter": "4.1.0",
    "karma": "1.7.0",
    "karma-chrome-launcher": "2.1.1",
    "karma-cli": "1.0.1",
    "karma-coverage-istanbul-reporter": "1.2.1",
    "karma-jasmine": "1.1.0",
    "karma-jasmine-html-reporter": "0.2.2",
    "karma-junit-reporter": "1.2.0",
    "protractor": "5.1.2",
    "ts-node": "3.2.0",
    "tslint": "5.7.0",
    "typescript": "2.7.2"
  }
}

我的 AppModule.ts 的一部分：

import {CUSTOM_ELEMENTS_SCHEMA, NgModule} from '@angular/core';
import {HttpModule, JsonpModule} from '@angular/http';
import {BrowserModule} from '@angular/platform-browser';
import {RouterModule} from '@angular/router';
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {NgbModule} from '@ng-bootstrap/ng-bootstrap';
import {MatExpansionModule} from '@angular/material/expansion';


import {AppComponent} from './app.component';


@NgModule({
    bootstrap: [AppComponent],
    declarations: [
        AppComponent,
        ],
    imports: [
        NgbModule.forRoot(),
        BrowserModule,
        HttpClientModule,
        MatExpansionModule,
        HttpModule,
        FormsModule,
        ReactiveFormsModule,
        JsonpModule,
        BrowserAnimationsModule,
        RouterModule,
        RouterModule.forRoot(appRoutes, {useHash: true})
    ],
    providers: [
        xxxx
    ],
    schemas: [CUSTOM_ELEMENTS_SCHEMA]
})

export class AppModule {

}

提前感谢您的帮助！

Answer 1

您的代码似乎正确。您是否停止并重新启动您的 Angular 开发服务器？在ng serve 处于活动状态时添加模块（或执行-npm install）也不会正确更新项目。