如何解决Angular中'ag-grid-angular'未被识别及组件报错问题？

我在Angular项目中遇到问题：ag-grid-angular标签无法被识别，rowData和columnDefs数据绑定也无法正常工作。已确认导入了所有所需依赖，但问题仍未解决。此前代码曾短暂正常运行，在生成新组件并迁移MatExpansionPanel相关代码后开始报错，即使移除新组件恢复原代码，错误依旧存在。

编辑补充：后续发现这并非ag-grid单独的问题，所有Angular组件均出现报错。

rowData中使用的MOVIES是通过interface定义的movie类型导出数组。

search.component.html代码 #

<mat-expansion-panel [expanded]="true">
  <mat-expansion-panel-header>
    <mat-panel-title>Search</mat-panel-title>
  </mat-expansion-panel-header>

  <ag-grid-angular
    style="width: 100%; height: 100%"
    class="ag-theme-alpine"
    [rowData]="rowData"
    [columnDefs]="columnDefs">
  </ag-grid-angular>

</mat-expansion-panel>

search.component.ts代码 #

import { Component } from '@angular/core';
import { NgModule } from '@angular/core';
import { AgGridModule } from 'ag-grid-angular';
import { ColDef } from 'ag-grid-community';
import { MatExpansionModule } from '@angular/material/expansion';
import { MOVIES } from '../movies';

@Component({
  selector: 'app-popular',
  templateUrl: './search.component.html',
  styleUrls: ['./search.component.scss']
})
export class SearchComponent {

  rowData = MOVIES;

  columnDefs: ColDef[] = [
    {field: 'title'},
    {field: 'description', resizable: true},
    {field: 'release_year'},
    {field: 'genre', resizable: true},
    {field: 'availability', resizable: true},
    {field: 'runtime'},
    {field: 'rating'},
  ];
}

app.module.ts代码 #

import { NgModule } from '@angular/core';
import { MatExpansionModule } from '@angular/material/expansion';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { AgGridModule } from 'ag-grid-angular';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { NoopAnimationsModule } from '@angular/platform-browser/animations';
import { LatestComponent } from './latest/latest.component';
import { PopularComponent } from './popular/popular.component';
import { SearchComponent } from './search/search.component';
import { HttpClientModule } from '@angular/common/http';
import { FormControl } from '@angular/forms';
import { FormsModule } from '@angular/forms';

@NgModule({
  declarations: [
    AppComponent,
    LatestComponent,
    PopularComponent,
    SearchComponent,

  ],
  imports: [
    AppRoutingModule,
    AgGridModule.withComponents([]),
    NoopAnimationsModule,
    MatExpansionModule,
    BrowserModule,
    BrowserAnimationsModule,
    HttpClientModule,
    FormControl,
    FormsModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

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