Angular团队每6个月发布一个主要版本，包含新功能、改进和重大变更。本章将指导你如何安全地升级Angular应用，从旧版本迁移到最新版本。
建议直接升级到Angular 8+，再逐步升级到最新版
可升级到Angular 12+，然后到最新版
重大变更：引入IVY编译和渲染引擎
相对平滑的升级路径
移除View Engine，仅支持IVY
稳定版本，支持最新功能
确保有完整的项目备份，包括源代码和node_modules
# 使用Git创建备份分支
git checkout -b backup-before-upgrade
git add .
git commit -m "备份: 升级前状态"确保Node.js版本符合Angular要求
| Angular版本 | Node.js版本 | TypeScript版本 |
|---|---|---|
| Angular 13+ | 14.20+ / 16.13+ / 18.10+ | 4.2+ |
| Angular 12 | 12.14+ / 14.15+ | 4.2+ |
| Angular 11 | 10.13+ / 12.11+ | 4.0+ |
| Angular 10 | 10.13+ / 12.11+ | 3.9+ |
确保所有第三方库都支持目标Angular版本
# 检查过时的依赖
npm outdated
# 检查与Angular的兼容性
npm ls @angular/coreAngular CLI提供的自动化升级工具
ng update [包名] [选项]
| 选项 | 说明 | 示例 |
|---|---|---|
| --force | 强制更新，忽略警告 | --force |
| --next | 更新到下一个预发布版本 | --next |
| --all | 更新所有包 | --all |
| --migrate-only | 只运行迁移，不更新包 | --migrate-only |
| --from | 指定从哪个版本迁移 | --from=10.0.0 |
| --to | 指定迁移到哪个版本 | --to=13.0.0 |
# 一步式升级（推荐）
ng update @angular/cli @angular/core
# 逐步升级
ng update @angular/cli@13 @angular/core@13
ng update @angular/cli@14 @angular/core@14
ng update @angular/cli@15 @angular/core@15# 从Angular 8升级到13
ng update @angular/cli@9 @angular/core@9
ng update @angular/cli@10 @angular/core@10
ng update @angular/cli@11 @angular/core@11
ng update @angular/cli@12 @angular/core@12
ng update @angular/cli@13 @angular/core@13# 不要这样做！
ng update --all --force
# 可能破坏项目// 升级后需检查
import { Component } from '@angular/core';
// 确保没有使用已弃用的API
@Component({
selector: 'app-example',
templateUrl: './example.component.html',
// 不再支持`entryComponents`
})
export class ExampleComponent {}// angular.json配置变化
{
"projects": {
"my-app": {
"architect": {
"build": {
"options": {
// 不再需要这个配置
// "aot": true // 默认启用且不可禁用
}
}
}
}
}
}// FormsModule的重大变更
import { FormControl, FormGroup } from '@angular/forms';
// 旧方式（松散类型）
const form = new FormGroup({
name: new FormControl(''),
age: new FormControl(0)
});
// 新方式（严格类型）
const form = new FormGroup<{
name: FormControl;
age: FormControl;
}>({
name: new FormControl(''),
age: new FormControl(0)
}); // 新的独立组件API
import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule } from '@angular/router';
@Component({
selector: 'app-standalone',
standalone: true, // 标记为独立组件
imports: [CommonModule, RouterModule], // 显式导入依赖
templateUrl: './standalone.component.html',
})
export class StandaloneComponent {}# 清理缓存并重新安装依赖
rm -rf node_modules package-lock.json
npm cache clean --force
npm install
# 或者使用yarn
yarn cache clean
yarn install// 更新类型定义
// 1. 检查第三方库的@types包
npm install @types/库名@latest
// 2. 更新Angular类型
npm install @angular/core@latest @angular/common@latest
// 3. 如有需要，临时禁用严格模式
// tsconfig.json
{
"compilerOptions": {
"strict": false // 临时关闭
}
}// IVY中样式封装的变更
@Component({
selector: 'app-example',
templateUrl: './example.component.html',
styleUrls: ['./example.component.scss'],
// 尝试不同的封装模式
encapsulation: ViewEncapsulation.None
// 或者
encapsulation: ViewEncapsulation.ShadowDom
})
// 或者全局修复
// angular.json
{
"projects": {
"my-app": {
"architect": {
"build": {
"options": {
"styles": [
"src/styles.scss" // 确保全局样式正确引入
]
}
}
}
}
}
}允许AngularJS和Angular在同一个应用中运行
// 安装升级模块
import { UpgradeModule } from '@angular/upgrade/static';
@NgModule({
imports: [
BrowserModule,
UpgradeModule
]
})
export class AppModule {
constructor(private upgrade: UpgradeModule) {}
ngDoBootstrap() {
this.upgrade.bootstrap(document.body, ['angularjs-app'], { strictDi: true });
}
}
// 降级Angular组件供AngularJS使用
import { downgradeComponent } from '@angular/upgrade/static';
angular.module('angularjs-app')
.directive('appAngularComponent',
downgradeComponent({ component: AngularComponent }) as angular.IDirectiveFactory
);