Angular 12引入MatDrawerContainer报错NG6002及白屏问题排查

问题解决步骤 #

• 第一步：修正Angular Material组件的导入错误
  你当前的NG6002报错的核心原因是错误地将MatDrawerContainer组件直接写入了AppModule的imports数组中，Angular的NgModule的imports数组仅允许引入NgModule类，不能直接引入组件/指令类。
  正确操作：
  在AppModule中引入MatSidenavModule模块，删除imports数组中的MatDrawerContainer即可，组件会随模块自动导出可用：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { MatSidenavModule } from '@angular/material/sidenav'; // 导入对应模块
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    MatSidenavModule // 加入imports数组
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

• 第二步：修正tsconfig.json的无效配置
  你将"enableIvy": false放在了tsconfig的根节点属于无效配置，该参数属于angularCompilerOptions的子属性。Angular 12及对应版本的Material默认完全兼容Ivy编译，无需关闭Ivy，直接删除根节点的"enableIvy": false配置即可。如果确实需要关闭Ivy（不推荐），需要将配置移到angularCompilerOptions下。

• 第三步：清理缓存重新构建
  之前的错误配置会产生残留缓存，按顺序执行以下命令即可恢复正常：

1. 删除旧依赖和锁文件：

# macOS/Linux
rm -rf node_modules package-lock.json
# Windows
rmdir /s /q node_modules && del package-lock.json

2. 重新安装依赖：

npm install

3. 手动执行ngcc处理依赖兼容：

npx ngcc

4. 清理缓存启动项目：

ng serve --open

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