Ionic6/Angular14项目报'mat-select'非已知元素NG0304错误

问题场景 #

• 项目技术栈：Ionic 6 / Angular 14
• 操作：新建基础应用，尝试接入Angular Material，在LoginPage组件模板中使用mat-select组件
• 报错信息：NG0304: 'mat-select' is not a known element (used in the 'LoginPage' component template)
• 报错截图：
  

已完成配置 #

根模块AppModule配置 #

已将MatSelectModule加入根模块imports数组，同时引入了Angular Material要求的BrowserAnimationsModule，完整代码如下：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';
import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatSelectModule } from '@angular/material/select';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    IonicModule.forRoot(),
    AppRoutingModule,
    BrowserAnimationsModule,
    MatSelectModule
  ],
  providers: [{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }],
  bootstrap: [AppComponent],
})
export class AppModule { }

LoginPage组件配置 #

组件装饰器的imports数组中也单独引入了MatSelectModule，完整TS代码如下：

import { Component, OnInit } from '@angular/core';
import { MatSelectModule } from '@angular/material/select';

@Component({
  imports: [MatSelectModule],
  selector: 'app-login',
  templateUrl: './login.page.html',
  styleUrls: ['./login.page.scss'],
})
export class LoginPage implements OnInit {
  locations: any[];

  constructor() { }

  ngOnInit() {
    this.locations = [
      { "DatabaseName": "TEST1" },
      { "DatabaseName": "TEST2" },
      { "DatabaseName": "TEST3" }
    ]
  }
}

LoginPage模板代码 #

页面模板中使用mat-select和mat-option渲染选择器，代码如下：

<ion-row>
  <ion-col size="3"></ion-col>
  <ion-col size="6">  
    <mat-select>
      <mat-option *ngFor="let location of locations" [value]="location.DatabaseName">
        {{location.DatabaseName}}
      </mat-option>
    </mat-select>
  </ion-col>
  <ion-col size="3"></ion-col>
</ion-row>

现存异常 #

完成以上配置后依然抛出前述NG0304错误，页面渲染效果异常，异常截图如下：

原本预期仅需将模块添加到app.module中即可在全应用范围内使用对应组件，现需要确认是否遗漏了必要的基础配置步骤。

内容的提问来源于stack exchange，提问作者Joe Starnes