快速重构Angular17+的新文件命名当我将公司项目升级到v20之后，我在编写新页面时使用指令ng g c trade

当我将公司项目升级到v20之后，我在编写新页面时使用指令ng g c trademark-packing创建新页面，发现新创建的文件名字变了，按我预期的应该是这三个文件：

trademark-packing.component.html

trademark-packing.component.css

trademark-packing.component.ts

然而创建的文件名则是：

trademark-packing.html

trademark-packing.css

trademark-packing.ts

带着疑问我去查询了一下资料，发现Angular在2023年11月发布的一个新版本中采用了一种新的项目结构默认风格，即删除.component.html/css/ts这样冗长的后缀，只有在项目默认开启Standalone Component的时候才会生效。

我这样喜欢简洁的人当然要第一时间采用这样的全新命名方式（我已经吐槽.component这个后缀很久了），于是备份了项目之后便开始行动。

批量修改组件格式

这一部分我没有记录，简单来说就是修改这样两个部分：

export class XxxComponent → export class Xxx import { XxxComponent } from ... → import { Xxx } from

因为我忘记了使用正则表达式，使用了最笨的一键替换……出了一些问题周周转转才达成这个目的。

你可以尝试使用正则表达式：

将export class (\w+)Component\b替换为export class $1

将import\s+{\s*(\w+)Component\s*}\s+from替换为import { $1 } from

批量重命名文件

因为我是Windows系统，所以使用powershell进行批量文件命名

Get-ChildItem -Recurse -Filter "*.component.ts" | ForEach-Object {
    $newName = $_.Name -replace ".component.ts$", ".ts"
    Rename-Item $_.FullName $newName
}

Get-ChildItem -Recurse -Filter "*.component.html" | ForEach-Object {
    $newName = $_.Name -replace ".component.html$", ".html"
    Rename-Item $_.FullName $newName
}

Get-ChildItem -Recurse -Filter "*.component.css" | ForEach-Object {
    $newName = $_.Name -replace ".component.css$", ".css"
    Rename-Item $_.FullName $newName
}

如果你是Linux系统，可以使用以下命令：

find src/app -name "*.component.ts" -exec bash -c 'mv "$0" "${0/.component.ts/.ts}"' {} ;

find src/app -name "*.component.html" -exec bash -c 'mv "$0" "${0/.component.html/.html}"' {} ;

find src/app -name "*.component.scss" -exec bash -c 'mv "$0" "${0/.component.scss/.scss}"' {} ;

全局替换import路径

我使用的是VsCode，在查找替换部分使用正则表达式

将(['"]./.*).component(['"])全部替换为$1$2

带来的效果是将

import { DialogFormComponent } from './dialog-form.component';

替换为

import { DialogFormComponent } from './dialog-form';

同步`@Component` 装饰器内引用

同样是在查找替换部分使用正则表达式

将.component.(html|scss|css)替换为.$1

带来的效果是将

tsCopyEdit@Component({
  selector: 'app-dialog-form',
  templateUrl: './dialog-form.component.html',
  styleUrls: ['./dialog-form.component.scss']
})

替换为

tsCopyEdit@Component({
  selector: 'app-dialog-form',
  templateUrl: './dialog-form.html',
  styleUrls: ['./dialog-form.scss']
})

替换剩余import路径

因为我的某些import的路径是例如import { MicDatePicker } from '../components/date-picker.component';

则还需要再次使用一个正则表达式来替换

将(['"])([^'"]+).component(['"])替换为$1$2$3

删除多余文件

到这一步就基本完成了文件名的替换。

但我发现我的某些网页中同时存在了例如trademark-packing.component.ts和trademark-packing.ts两个文件，可能是期间产生的BUG？

使用三个powershell命令将多余的文件删除即可：

Get-ChildItem -Recurse -Filter "*.component.ts" | Remove-Item -Force

Get-ChildItem -Recurse -Filter "*.component.html" | Remove-Item -Force

Get-ChildItem -Recurse -Filter "*.component.scss" | Remove-Item -Force

快速重构Angular17+的新文件命名