执行Angular Material导航生成命令报错，寻求Schematics替代方案

问题背景 #

执行命令：

ng generate @angular/material:navigation dashboard

出现双重报错：

'__\Desktop\machine test\employee\node_modules@angular\material\schematics\ng-generate\navigation\schema.json'中的'path'选项使用了已弃用行为，应改用'workingDirectory'智能默认提供程序。(0 , validation_1.validateName) is not a function

已通过修改schema.json中path字段的配置解决弃用警告：

"$default": {
  "$source": "projectName"
}

但(0 , validation_1.validateName) is not a function报错仍未解决，同时需要了解项目中实现Schematics的其他途径。

修复validateName报错的可行方案 #

• 版本兼容性排查与对齐
  这个报错大概率是Angular CLI和@angular/material版本不匹配导致的。先查看当前版本：

  ng version
  

  确保@angular/cli、@angular/material、@angular/cdk三者版本完全一致，不一致的话执行升级/降级命令（以16.x版本为例）：

  npm install @angular/cli@16 @angular/material@16 @angular/cdk@16 --save
  

• 清理依赖缓存
  依赖缓存损坏也可能引发这类异常，执行以下步骤重置依赖：

  rm -rf node_modules package-lock.json
  npm cache clean --force
  npm install
  

• 临时修复Schematics代码
  若不想调整版本，可以找到报错的Schematics文件（通常在node_modules/@angular/material/schematics/ng-generate/navigation/index.js），检查validateName的导入语句，确保它来自正确的工具包，比如替换为：

  const { validateName } = require('@angular-devkit/schematics');
  

实现Schematics的替代方式 #

• 自定义本地Schematics

  1. 全局安装Schematics CLI：

     npm install -g @angular-devkit/schematics-cli
     

  2. 初始化自定义Schematics项目：

     schematics blank --name=my-nav-schematics
     

  3. 在项目中编写导航组件的生成逻辑，之后通过本地路径调用：

     ng generate ./my-nav-schematics:navigation dashboard
     

• 使用第三方Schematics库
  社区有不少成熟的Schematics库可直接使用，比如生成CRUD组件、Admin面板的工具，安装后通过CLI命令即可调用，无需自己从零编写逻辑。

• 手动构建导航组件
  如果Schematics问题难以快速解决，直接手动创建组件：

  1. 在项目中新建dashboard组件目录，创建对应的.component.ts、.component.html、.component.css、.component.spec.ts文件。
  2. 在模块中手动导入所需的Angular Material模块（如MatToolbarModule、MatSidenavModule、MatListModule等）。
  3. 参考Angular Material官方文档的导航示例，编写组件的HTML结构和TS逻辑。

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