I'm currently using this Angular module Material Expansion Panel, it's working fine on local but when I try to build it in prod, it throws me this error :
'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.
I don't really know what to do to ignore this message, since I already have 'CUSTOM_ELEMENTS_SCHEMA' in my AppModule.
Here's my code with this expansion panel :
<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>
My package.json (I can't update the packages for compatibility reasons) :
{
"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"
}
}
Parts of my 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 {
}
Thanks in advance for any help !
