Angular 13中NG8001元素未知及NG1010错误求助

核心错误原因 #

你的AppModule配置存在两处关键错误，直接触发了NG1010和NG8001报错：

• imports数组混入了非模块类/装饰器：Angular要求imports仅存放可导入的NgModule，而ViewChild是组件装饰器、MatPaginator/MatSort是具体组件、MatTableDataSource是数据处理类，都不属于可导入模块范畴。
• exports数组错误导出组件/指令：MatFormField、MatLabel是MatFormFieldModule包含的组件，exports只需导出模块即可，无需单独导出组件。

修复后的app.module.ts代码 #

@NgModule({
  declarations: [
    AppComponent,
    DialogComponent,
  ],
  imports: [
    DialogModule,
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    MatIconModule,
    MatToolbarModule,
    MatButtonModule,
    MatDialogModule,
    MatFormFieldModule,
    MatInputModule,
    MatSelectModule,
    MatDatepickerModule,
    MatNativeDateModule,
    MatRadioModule,
    ReactiveFormsModule,
    FormsModule,
    HttpClientModule,
    MatTableModule,
    // 移除了ViewChild、MatPaginator、MatSort、MatTableDataSource
  ],
  exports:[
    MatToolbarModule,
    MatFormFieldModule,
    // 移除了MatFormField、MatLabel
  ],
  providers: [],
  bootstrap: [AppComponent],
  schemas:[CUSTOM_ELEMENTS_SCHEMA,NO_ERRORS_SCHEMA]
})
export class AppModule { }

后续补充说明 #

1. ViewChild、MatPaginator等的正确用法：
   在需要使用的组件（如AppComponent）内单独导入并使用：

   import { ViewChild } from '@angular/core';
   import { MatPaginator, MatSort, MatTableDataSource } from '@angular/material/table';
   
   export class AppComponent {
     @ViewChild(MatPaginator) paginator!: MatPaginator;
     @ViewChild(MatSort) sort!: MatSort;
     dataSource = new MatTableDataSource();
   
     // 在组件逻辑中调用这些实例
   }
   

2. NG8001错误的连带修复：
   当imports的错误修复后，Angular能正确识别导入的Material模块，mat-toolbar等组件的未知元素错误会自动消失。

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