This is a confusing but relatively simple question:
I went from Angular 8 ->>> 14.2.12. After several builds, deleting package.lock.json (which isn't necessary anymore), Clearing NPM Cache, and deleting node_modules folder then re-running npm install, I'm getting this for every single angular material component...
1. If 'mat-tab-group' is an Angular component, then verify that it is part of this module.
2. If 'mat-tab-group' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
53 <mat-tab-group dynamicHeight>
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
src/app/shared/info-dialog/personinfo/personinfo.component.ts:12:16
12 templateUrl: './personinfo.component.html',
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Error occurs in the template of component PersoninfoComponent.
Error: src/app/shared/Info-dialog/personinfo/personinfo.component.html:54:9 - error NG8001: 'mat-tab' is not a known element:
1. If 'mat-tab' is an Angular component, then verify that it is part of this module.
2. If 'mat-tab' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
54 <mat-tab label="Home">
~~~~~~~~~~~~~~~~~~~~~~
And in app.module.ts I already have this...
CUSTOM_ELEMENTS_SCHEMA in app.module.ts
So, why is this continually happening?
Here's the interior section of my package.json
"private": "true",
"dependencies": {
"@angular/animations": "~14.2.12",
"@angular/cdk": "^14.2.7",
"@angular/common": "~14.2.12",
"@angular/compiler": "~14.2.12",
"@angular/core": "^14.2.12",
"@angular/flex-layout": "^15.0.0-beta.42",
"@angular/forms": "^14.2.12",
"@angular/material": "^14.2.7",
"@angular/platform-browser": "~14.2.12",
"@angular/platform-browser-dynamic": "~14.2.12",
"@angular/platform-server": "~14.2.12",
"@angular/router": "^14.2.12",
"@ng-bootstrap/ng-bootstrap": "^12.1.2",
"@ngrx/component": "^14.2.0",
"@ngrx/store": "^14.3.3",
"@nguniversal/module-map-ngfactory-loader": "8.2.6",
"@popperjs/core": "^2.11.6",
"@syncfusion/ej2-angular-buttons": "18.2.58",
"@syncfusion/ej2-angular-inputs": "^18.2.59",
"@syncfusion/ej2-angular-popups": "18.2.58",
"@syncfusion/ej2-base": "18.2.59",
"@syncfusion/ej2-buttons": "18.2.58",
"@syncfusion/ej2-inputs": "18.2.59",
"@syncfusion/ej2-popups": "18.2.58",
"angular-datatables": "^14.0.2",
"angular-moment": "^1.3.0",
"angular-web-storage": "^14.0.0",
"angular2-multiselect-dropdown": "^4.6.10",
"angular2-text-mask": "^9.0.0",
"angular2-uuid": "^1.1.1",
"bootstrap": "^4.6.2",
"core-js": "^3.29.0",
"datatables.net": "^1.10.23",
"datatables.net-autofill": "^2.3.7",
"datatables.net-autofill-bs4": "^2.5.1",
"datatables.net-bs4": "^1.13.1",
"datatables.net-colreorder-bs4": "^1.6.1",
"datatables.net-datetime": "^1.2.0",
"datatables.net-dt": "^1.10.23",
"datatables.net-fixedcolumns-bs4": "^4.2.1",
"datatables.net-keytable": "^2.6.2",
"datatables.net-keytable-bs4": "^2.8.0",
"datatables.net-responsive-bs4": "^2.4.0",
"datatables.net-rowgroup-bs4": "^1.3.0",
"datatables.net-rowreorder-bs4": "^1.3.1",
"datatables.net-scroller-bs4": "^2.1.0",
"datatables.net-searchbuilder-bs4": "^1.4.0",
"datatables.net-searchpanes-bs4": "^2.1.0",
"datatables.net-staterestore-bs4": "^1.2.0",
"devextreme": "^21.2.8",
"devextreme-angular": "^21.2.8",
"devextreme-aspnet-data-nojquery": "^2.8.6",
"exceljs": "^4.3.0",
"file-saver": "2.0.5",
"guid-typescript": "^1.0.9",
"hammerjs": "^2.0.8",
"jquery": "^3.6.3",
"karma-coverage-istanbul-reporter": "^3.0.3",
"mat-currency-format": "0.0.7",
"moment": "^2.29.1",
"ng-multiselect-dropdown": "^0.2.14",
"ng4-loading-spinner": "^1.2.3",
"ngx-bootstrap": "^5.3.2",
"ngx-cookie-service": "^11.0.2",
"ngx-currency": "^2.3.3",
"ngx-mask": "^8.1.0",
"node-polyfill-webpack-plugin": "^2.0.1",
"npm": "^6.14.15",
"npm-check-updates": "^16.7.10",
"oidc-client": "^1.9.1",
"parse-address": "^1.1.2",
"path-browserify": "^1.0.1",
"popper.js": "^1.16.1",
"rxjs": "^6.6.7",
"streamsaver": "^2.0.4",
"subsink": "^1.0.2",
"tar": "^6.1.13",
"ts-node": "^8.10.2",
"typescript": "^3.5.3",
"url-polyfill": "^1.1.12",
"web-streams-polyfill": "^2.1.1",
"zone.js": "0.12.0"
},
"devDependencies": {
"@angular-devkit/build-angular": "~14.2.10",
"@angular/cli": "~14.2.10",
"@angular/compiler-cli": "~14.2.12",
"@angular/language-service": "^14.2.12",
"@cucumber/cucumber": "^8.10.0",
"@types/datatables.net": "^1.10.23",
"@types/googlemaps": "^3.43.3",
"@types/jasmine": "~3.10.0",
"@types/jest": "^28.1.4",
"@types/jquery": "^3.5.14",
"@types/jquery.validation": "^1.16.7",
"@types/lodash": "^4.14.182",
"@types/mocha": "^9.1.1",
"@types/node": "^12.20.55",
"@typescript-eslint/eslint-plugin": "^5.33.1",
"@typescript-eslint/parser": "^5.33.1",
"codelyzer": "^5.2.0",
"datatables.net": "^1.13.1",
"eslint": "^8.22.0",
"eslint-plugin-vue": "^9.3.0",
"jasmine-core": "~4.0.0",
"karma": "~6.3.0",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage": "~2.1.0",
"karma-jasmine": "~4.0.0",
"karma-jasmine-html-reporter": "~1.7.0",
"ng-lint-report": "^0.2.0",
"nightwatch": "^2.6.5",
"nightwatch-api": "^3.0.2",
"schematics-utilities": "^2.0.2",
"stylelint": "^14.9.1",
"stylelint-config-prettier": "^9.0.3",
"stylelint-config-standard-scss": "^5.0.0",
"stylelint-declaration-use-variable": "^1.7.3",
"stylelint-order": "^5.0.0",
"stylelint-prettier": "^2.0.0",
"stylelint-scss": "^4.3.0",
"tslib": "^2.4.0",
"typescript": "~4.6.2"
},
"optionalDependencies": {
"node-sass": "^4.14.1",
"tslint": "~5.20.0"
}
This is Angular Material inside my app.module.ts
import { MaterialModule } from 'src/app/modules/material';
import { MatIconModule } from '@angular/material/icon';
import { MatToolbarModule } from '@angular/material/toolbar';
import { MatSidenavModule } from '@angular/material/sidenav';
import { MatDialogModule } from '@angular/material/dialog';
import { MatDividerModule } from '@angular/material/divider';
import { MatAutocompleteModule } from '@angular/material/autocomplete';
import { MatCheckboxModule } from '@angular/material/checkbox';
import { MatButtonModule } from '@angular/material/button';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatDatepickerModule } from '@angular/material/datepicker';
import { MatInputModule } from '@angular/material/input';
import { MatSelectModule } from '@angular/material/select';
import { MatNativeDateModule } from '@angular/material/core';
