从AngularJS 1.2.6升级到Angular 16的Material组件批量替换方案咨询

一、全局正则批量替换（最快直接） #

利用编辑器或脚本一次性替换所有模板中的 AngularJS Material 标签和属性：

1. 标签替换：用正则匹配所有 <md-xxx> 和 </md-xxx>，替换为 <mat-xxx> 和 </mat-xxx>
   • 在 VS Code 中打开全局替换（Ctrl+Shift+H），输入查找正则：(<\/?)md-，替换为：$1mat-
   • 可限定匹配范围为 .html 模板文件，避免误改代码文件
2. 属性替换：针对模板中类似 md-button、md-raised 这类属性，用正则 md-([a-z-]+) 替换为 mat-$1
3. 样式文件替换：CSS/SCSS 中所有 md- 前缀的类名，同样用上述正则替换为 mat-

注意：先备份项目，替换后检查自定义组件中是否有 md- 前缀的标签，避免误改非 Material 组件

二、自定义兼容指令（渐进式过渡） #

如果需要保留旧标签一段时间，可编写 Angular 自定义指令映射旧标签到新组件：

示例：md-card-content 兼容指令 #

import { Directive, ElementRef } from '@angular/core';
import { MatCardContent } from '@angular/material/card';

@Directive({
  selector: 'md-card-content',
  // 让Angular识别该指令为MatCardContent的实例，保持组件逻辑兼容
  providers: [{ provide: MatCardContent, useExisting: MdCardContentDirective }]
})
export class MdCardContentDirective extends MatCardContent {
  constructor(el: ElementRef) {
    super(el);
  }
}

将该指令声明在对应模块中，原有的 <md-card-content> 标签即可直接使用 Angular Material 的功能，无需修改模板。后续可逐步批量替换标签后删除这些兼容指令。

三、Node.js 脚本批量处理（灵活可控） #

编写脚本遍历所有模板和样式文件，实现自动化替换：

const fs = require('fs');
const path = require('path');

// 替换规则
const replaceRules = [
  { regex: /(<\/?)md-/g, replacement: '$1mat-' }, // 标签替换
  { regex: /md-([a-z-]+)/g, replacement: 'mat-$1' }, // 属性/类名替换
];

function processFile(filePath) {
  if (!['.html', '.css', '.scss'].includes(path.extname(filePath))) return;
  
  let content = fs.readFileSync(filePath, 'utf8');
  replaceRules.forEach(rule => {
    content = content.replace(rule.regex, rule.replacement);
  });
  fs.writeFileSync(filePath, content);
}

function traverseDir(dir) {
  fs.readdirSync(dir).forEach(item => {
    const fullPath = path.join(dir, item);
    if (fs.statSync(fullPath).isDirectory()) {
      traverseDir(fullPath);
    } else {
      processFile(fullPath);
    }
  });
}

// 执行替换，指定项目模板根目录
traverseDir('./src/app');

运行脚本前务必备份项目，可根据需要调整替换规则，排除特定文件或目录。

四、后续注意事项 #

• 组件导入更新：批量替换模板后，需将所有 AngularJS Material 的导入替换为 Angular Material 对应模块，例如将旧导入替换为 import { MatCardModule } from '@angular/material/card';
• API 差异适配：部分组件逻辑存在差异（如对话框、菜单），标签替换后需检查并调整组件代码，例如 AngularJS 的 $mdDialog 需替换为 Angular 的 MatDialog
• 样式适配：Angular Material 的样式结构与 AngularJS Material 有所不同，替换后需测试页面样式，调整自定义样式以匹配新组件

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