I used the code straight from the Angular Material website [https://material.angular.io/components/tabs/overview], and I believe I followed it slavishly, but clearly I've done something wrong because I can't get it to load, well the mat-tab appears, but the error also appears immediately in the console.
The error Any help GREATLY appreciated.
I followed two different tutorials, and loaded my app.module.ts correctly (I believe) but I'm guessing there is some configuration thing that I don't know about, because nothing I've tried has removed this error.
Ok, discovered the solution (finally), with thanks to Angular CLI throws error: 'mat-tab-nav-panel' is not a known element
The problem began when I used the ng add
command from the Angular Material website: *ng add @angular/material*
, and this added the version of Angular Material version 7.0.0 to my project.
List here:
@angular-devkit/architect 0.1402.10
@angular-devkit/build-angular 14.2.10
@angular-devkit/core 14.2.10
@angular-devkit/schematics 14.1.3
@angular/cli 14.1.3
@angular/material 7.0.0
@schematics/angular 14.1.3
rxjs 7.5.7
typescript 4.7.4
Thinking version 7 seems way too old, I then created a fresh Angular project with: *ng new test_4*
, went to the NPM website, and—following Benoit's answer—found a version of Angular Material that should work, version 13.3.9, and installed that in my project using: *npm i @angular/material@13.3.9*
. The new project's details:
@angular-devkit/architect 0.1402.10
@angular-devkit/build-angular 14.2.10
@angular-devkit/core 14.2.10
@angular-devkit/schematics 14.1.3
@angular/cli 14.1.3
@angular/material 13.3.9
@schematics/angular 14.1.3
rxjs 7.5.7
typescript 4.7.4
Once I did that, mat-tab-group
began working fine.
Hope this may help others as new to Angular as I am.