Angular8升级到Angular13常见问题及解决
来源：互联网 2026-06-14 08:12:19将Angular从8升级至13需逐级进行，首先确保Node版本≥12.20并备份项目、删除锁文件。依次升级核心依赖、@angular/cdk、NG-ZORRO及NG-ALAIN。常见问题包括TypeScript编译未用文件、仓库不洁、依赖缺失、ViewChild参数遗漏、样式路径错误、模块导入路径变更等，对应提供配置修改或重新安装依赖等解决方案。
前言
项目需要将 Angular 从 8 升级到 13，无法直接完成，必须逐级升级。本文记录了升级过程中遇到的各种报错及对应的处理方法。
一、升级前准备
首先确认 Node.js 版本不低于 12.20。接着新建一个分支，或通过其他方式备份当前项目，确保安全。最后删除项目下的 yarn.lock 或 package-lock.json，避免旧依赖造成干扰。
长期稳定更新的攒劲资源： >>>点此立即查看<<<
二、升级步骤（逐级进行）
- 升级相关依赖：打开 update.angular.io，按照指引将项目逐步升级到 Angular 9 至 13。
- 如果单独使用了 @angular/cdk，记得执行
ng update @angular/cdk@（对应版本）。 - 升级 NG-ZORRO：
ng update ng-zorro-antd@（对应版本） - 升级 NG-ALAIN：
ng update ng-alain（对应版本）
三、常见问题及解决方案
错误1：WARNING in xxx is part of the TypeScript compilation but it's unused.Add only entry points to the 'files' or 'include' properties in your tsconfig.
// 在 exclude 后添加以下内容 "files": ["../src/main.ts", "../src/polyfills.ts"], "include": ["src/**/*.d.ts"]
错误2：Repository is not clean. Please commit or stash any changes before updating.
ng update --all --force --allow-dirty
错误3：Package '@angular/core' is not a dependency…
出现类似提示时，重新安装依赖即可。
npm i
错误4：ERROR in ./src/styles.less (…), @import '~@delon/theme/styles/index'; Can't resolve '@delon/theme/styles/index.less' …
路径发生了变化，需要去掉多余的一层目录。例如 @import '~@delon/theme/styles/index' 中的 styles 层需要移除。报错的目录文件都需要逐一检查。
如果路径写正确后仍然报错：
原因是 angular.json 中没有配置样式路径：
"stylePreprocessorOptions": {
"includePaths": [
"node_modules/"
]
}
错误5 src/app/layout/default/header/components/taskmange.component.ts:33:28 – error NG1001: @ViewChild options must be an object literal
问题在于 ViewChild 需要两个参数，第二个参数未传入。官方解释大致为：static 决定是否在变更检测运行前解析查询结果。若不提供该选项，编译器会按默认行为处理。
@ViewChild("taskDrawer", {static: true}) taskDrawer;
// 或者
@ViewChild("taskDrawer", {static: false}) taskDrawer;
// 或者
@ViewChild("taskDrawer") taskDrawer;
根据实际场景选择其中一种写法。
错误6：样式丢失
// angular.json 文件中引入 "styles": [ "src/styles.less", "./node_modules/ng-zorro-antd/ng-zorro-antd.min.css" ], // styles.less 文件中引入 @import '~ng-zorro-antd/ng-zorro-antd.less'; @import '~ng-zorro-antd/style/entry.less'; @import '~ng-zorro-antd/button/style/entry.less';
错误7：ERROR in src/app/core/i18n/i18n.service.ts:13:24 – error TS2307: Cannot find module 'date-fns/locale/en'
import { enUS as dfEn, zhCN as dfZhCn, zhTW as dfZhTw, vi as dfVi } from 'date-fns/locale';
错误8：import { STColumn, STComponent, STReq, STRequestOptions, STRes } from '@delon/abc/table';
// https://github.com/ng-alain/ng-alain/issues/1569 中有说明路径变化，调整为以下写法
import { STColumn, STComponent, STReq, STRequestOptions, STRes } from '@delon/abc/st';
错误9：error TS2307: Cannot find module 'date-fns/distance_in_words_to_now'
import formatDistanceToNow from 'date-fns/formatDistanceToNow';
错误10：NullInjectorError: No provider for ACLService!
// 在 app.module.ts 中补充缺失的 provider providers: [ // ... ACLService, AlainConfigService, ],
错误11：Package '@angular/core' is not a dependency…
npm i
错误12：ERROR in Failed to list lazy routes: Unknown module '…/app.module#AppModule'.
（暂无标准修复步骤，建议检查路由配置或版本间的兼容性）
错误13：Angular11 升级报错：Two incompatible decorators on class
经过多方查找，未找到通用解法。后来在 Angular 文档中发现一个配置可以解决该问题：
{
"angularCompilerOptions": {
"fullTemplateTypeCheck": true,
"strictInjectionParameters": true
}
}
错误14：typescript 不兼容问题 @angular/compiler-cli@8.0.3 requires a peer of typescript@>=3.4 <3.5
npm i typescript@3.4.3
错误15：import { NzMessageService, UploadFile } from 'ng-zorro-antd';
组件导入路径发生了变化：
import { NzMessageService } from 'ng-zorro-antd/message';
import { NzUploadFile } from 'ng-zorro-antd/upload';
错误16：import { NzModalService } from 'ng-zorro-antd';
同样路径发生变化：
import { NzModalService } from 'ng-zorro-antd/modal';
错误17：自定义主题色不生效
在 angular.json 中删除引入的组件主题色，然后在 src/styles.less 中引入预定义主题文件：
@import "../node_modules/ng-zorro-antd/ng-zorro-antd.less"; @import './styles/theme'; @import './styles/index';
错误18：Can't bind to 'formGroup' since it isn't a known property of 'form'
使用 Reactive Forms 需要额外引入 ReactiveFormsModule，具体参考官方文档。
错误19：Angular12 报错 (resize-observer-polyfill) TS2717: Property contentRect must be of type DOMRectReadOnly
两种解决方法：
（1）等待第三方库修复；
（2）在 tsconfig.json 中添加 "skipLibCheck": true 跳过第三方库的类型检查。
错误20：
npm install --save-dev raw-loader
错误21：多次注入
platformBrowserDynamic 被多次注入（通常出现在 main.ts 和 app.module.ts 中），删除多余的一个，例如删除 App.module.ts 中的。
错误22：angular 从11.x更新到12.x 收到 DON'T USE IT FOR PRODUCTION! 警告
升级到 12.2.17 后，执行：
ng update @angular/cli --migrate-only --from=11.2.0 --to=12.2.17
再运行 ng serve 警告即消失。
错误23：Git无法提交（Must use import to load ES Module）
升级过程需要逐级进行，每一步都需要 git commit。临时注释掉 .husky/pre-commit 中的 npx 开头行，升级完成后再恢复。
错误24：An unhandled exception occurred: Directory import '…/dev-server' is not supported resolving ES modules
版本不兼容，需要升级 @angular-devkit/build-angular：
// 升级前 "@angular-devkit/build-angular": "~12.2.18" // 升级后 "@angular-devkit/build-angular": "~13.3.9"
错误25：export 'startWith' (imported as 'startWith') was not found in 'rxjs'
rxjs 版本过低：
// 升级前 "rxjs": "~6.5.3" // 升级后 "rxjs": "~7.5.0"
错误26：Module '"@delon/chart"' has no exported member 'G2TimelineData'
路径发生变化：
import { G2TimelineData } from '@delon/chart/timeline';
错误27：编译后git出现了很多缓存编译文件
更新 .gitignore，增加以下忽略项：
# Compiled output /dist /tmp /out-tsc /bazel-out # Node /node_modules npm-debug.log yarn-error.log # IDEs and editors .idea/ .project .classpath .c9/ *.launch .settings/ *.sublime-workspace # Visual Studio Code .vscode/* !.vscode/settings.json !.vscode/tasks.json !.vscode/launch.json !.vscode/extensions.json .history/* # Miscellaneous /.angular/cache .sass-cache/ /connect.lock /coverage /libpeerconnection.log testem.log /typings # System files .DS_Store Thumbs.db
错误28：抽屉组件内部自定义内容无法展示
自定义 ng-content 外部需要使用
错误29：antd-Table组件渲染数据时出现第一行空白行
添加 [nzScroll]="{ x: '1500px' }" 后出现空白行，解决方法：
:host ::ng-deep .ant-table-measure-now {
visibility: collapse;
}
30.报错如下：
在 tsconfig.json 中新增 "skipLibCheck": true。
总结
以上是 Angular 8 升级到 Angular 13 过程中遇到的主要问题及其解决方法。版本跨度较大，遇到的坑不少，但只要按步骤逐一排查，最终都能顺利解决。希望这份记录对大家有所帮助。
侠游戏发布此文仅为了传递信息，不代表侠游戏网站认同其观点或证实其描述
