升级至Angular 6后Angular Material库报错及添加失败求助

看起来你遇到的核心问题是Angular版本与Material库版本不兼容，再加上Angular 6对ng add命令的支持限制导致的。下面是一步步的解决方法：

1. 安装与Angular 6匹配的依赖库 #

Angular 6必须搭配6.x版本的Material、CDK和Flex Layout，高版本的库会和Angular 6不兼容。执行以下命令安装对应版本：

npm install @angular/material@6.x @angular/cdk@6.x @angular/flex-layout@6.x --save

2. 修复模块导入错误 #

编译报错里的MatToolbarModule等找不到，是因为你没有在app.module.ts中正确导入这些模块。请按以下方式修改代码：

// 先导入所有需要的Material及第三方模块
import { MatToolbarModule } from '@angular/material/toolbar';
import { MatSidenavModule } from '@angular/material/sidenav';
import { MatButtonModule } from '@angular/material/button';
import { MatIconModule } from '@angular/material/icon';
import { MatListModule } from '@angular/material/list';
import { MatMenuModule } from '@angular/material/menu';
import { MatGridListModule } from '@angular/material/grid-list';
import { FlexLayoutModule } from '@angular/flex-layout';

// 导入你项目自定义的模块（注意路径要和实际文件位置一致）
import { AuthModule } from './auth/auth.module'; // 替换成你的AuthModule实际路径
import { AppRoutingModule } from './app-routing.module'; // 替换成你的路由模块实际路径

@NgModule({
  imports: [
    // ...保留你原本已有的其他导入（比如BrowserModule等）
    MatToolbarModule,
    MatSidenavModule,
    MatButtonModule,
    MatIconModule,
    MatListModule,
    MatMenuModule,
    MatGridListModule,
    FlexLayoutModule,
    AuthModule,
    AppRoutingModule
  ],
  // ...其他模块配置（declarations、providers等）
})
export class AppModule { }

3. 解决ng add @angular/material的报错 #

Angular 6的ng add命令对高版本的Material支持有限——高版本Material的schematics是为Angular 8+设计的，所以直接用npm指定版本安装就可以了，不需要再用ng add命令。

4. 额外检查项 #

• 确认AuthModule和AppRoutingModule是你项目中实际存在的模块，导入路径没有拼写错误；
• 安装完成后，重启你的开发服务器（ng serve），清除编译缓存后再重新编译。

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