园子博客后台 Angular 升级:手工迁移至 Standalone Component
最近在将园子博客后台的前端框架从 angular 15 升级至 angular 19,这边博文记录的是迁移至 Standalone Component 的过程。
之前尝试使用 angular 19 提供的迁移命令自动迁移,但迁移失败,详见 https://q.cnblogs.com/q/150498
ng g @angular/core:standalone
改为手动迁移,记录一下迁移过程。
删除标记与 NgModule 文件
- 删除所有
standalone: false
,一共198
个 - 删除所有 NgModule 文件,一个
84
个文件
find . -name *.module.ts -exec git rm {} \;
- 恢复测试中使用的 NgModule 文件 testing.module.ts
迁移至 standalone bootstrapping api
- 修改 main.ts
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app/app.component';
import { appConfig } from './app/app.config';
bootstrapApplication(AppComponent, appConfig)
.catch((err) => console.error(err));
- 创建 app.config.ts 文件并将 app.module.ts 中的 providers 迁移过来
export const appConfig: ApplicationConfig = {
providers: [
provideHttpClient(withFetch()),
provideAnimations(),
provideZoneChangeDetection(
{
eventCoalescing: true
}),
provideRouter(
routes,
withRouterConfig({
onSameUrlNavigation: 'reload'
}),
withPreloading(NoPreloading),
withViewTransitions()
),
NzModalService,
LoggerService,
// ...
]
};
针对 ngx-monaco-editor-v2,将
MonacoEditorModule.forRoot({
baseUrl: environment.assets.monacoBase,
}),
改为
provideMonacoEditor({
baseUrl: environment.assets.monacoBase,
}),
- 恢复 app-routing.module.ts 文件并重命名为 app.routes.ts
git checkout HEAD~1 app-routing.module.ts
git mv app-routing.module.ts app.routes.ts
- 处理 app.routes.ts 中通过 loadChildren 加载 NgModule 的代码
loadChildren: () => import('./pages/posts/posts.module').then(m => m.PostsModule)
- 将 posts.module.ts 并转换为 posts.routes.ts
git checkout HEAD~1 ./pages/posts/posts.module.ts
git mv ./pages/posts/posts.module.ts ./pages/posts/posts.routes.ts
- 修改 posts.routes.ts,改为
export const routes
, 删除 NgModule 部分代码,修改路由部分代码
export const POSTS_ROUTES: Routes = [
{
path: '',
component: PostMainComponent,
}
]
- 修改 app.routes.ts 中对应的 loadChildren 代码
loadChildren: () => import('./pages/posts/posts.routes').then(m => m.POSTS_ROUTES)
- 在 app.config.ts 中添加 onSameUrlNavigation 与 preloadingStrategy 配置
export const appConfig: ApplicationConfig = {
providers: [
provideZoneChangeDetection(
{
eventCoalescing: true
}),
provideRouter(
routes,
withRouterConfig({
onSameUrlNavigation: 'reload'
}),
withPreloading(NoPreloading)
),
provideHttpClient(withFetch()),
]
};
添加 import
近 200 个 component 需要一个一个 component 添加所需的 import,这是迁移中工作量最大的部分,即使只是用到了 *ngIf
或者 [ngClass]
, 也要添加对应的 import,详见 https://q.cnblogs.com/q/151533
解决 ViewChild 的问题
详见博问:迁移到 Standalone Component 后 ViewChild 无法正常工作
处理 imports 中漏添加 Directive 的问题
一个 standalone component 的模板中用了某个 directive,如果没有在 imports
中添加,build 与运行是都不会报错,只是这个 directive 没有被执行。
在 app.routes.ts 添加 providers
将之前在各个 NgModule 中添加的 providers 迁移到 app.routes.ts 中
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 清华大学推出第四讲使用 DeepSeek + DeepResearch 让科研像聊天一样简单!
· 推荐几款开源且免费的 .NET MAUI 组件库
· 实操Deepseek接入个人知识库
· 易语言 —— 开山篇
· Trae初体验
2020-01-09 搭建 Kubernetes 高可用集群
2010-01-09 陈楚生——一个人唱情歌
2005-01-09 团队Blog功能改进
2005-01-09 团队Blog后台管理功能已经可以使用