准備工作
保證本地沒有待提交的文件
// 全局cli升級到最新ng versionnpm install -g @angular/cli// 1. 查看升級到哪些最新版本ng update// 2. 強制升級所有依賴，（如果有些依賴是beta版本才支持angular10的，需要加--next）。ng update --all --force
經過上面步驟，package.json會發生變化，tsconfig.json也可能發生變化。檢查下package.json，主要的包是不是達到了預期。
接着准備以下操作：
ng-zorro-antd 分模塊導入
// 第一步修改 模塊引入修改// 前：import { ngZorroModule } from 'ng-zorro-antd';// 后import { NzButtonModule } from 'ng-zorro-antd/button';import { NzCardModule } from 'ng-zorro-antd/card';import { NzCarouselModule } from 'ng-zorro-antd/carousel';import { NzCheckboxModule } from 'ng-zorro-antd/checkbox';import { NzDatePickerModule } from 'ng-zorro-antd/date-picker';// 第二步 全局搜索 'ng-zorro-antd', 一個一個文件的修改，差不多都能看出來是哪個模塊的// 前import { VERSION as VERSION_ZORRO, NzModalService } from 'ng-zorro-antd';// 后import { NzModalService } from 'ng-zorro-antd/modal';import { VERSION as VERSION_ZORRO } from 'ng-zorro-antd/version';// 第三步， 遇到一些特殊的不太好改的，比如組件名，服務都找不到了，那就去看文檔使用吧。// 前import { NzDropdownContextComponent, NzDropdownService } from 'ng-zorro-antd';// 后，用法也改變了import { NzContextMenuService, NzDropdownMenuComponent } from 'ng-zorro-antd/dropdown';
ng-zorro-antd 全局配置修改
// 前：import { NZ_NOTIFICATION_CONFIG } from 'ng-zorro-antd';const notificationConfig = {provide: NZ_NOTIFICATION_CONFIG,useValue: {nzTop: '24px',nzBottom: '24px',nzPlacement: 'topRight',nzDuration: 4500,nzMaxStack: 7,nzPauseOnHover: true,nzAnimate: true,},};providers: [notificationConfig]// 后import { NZ_CONFIG } from 'ng-zorro-antd/core/config';const zorroConfig = {provide: NZ_CONFIG,useValue: {notification: {nzTop: '24px',nzBottom: '24px',nzPlacement: 'topRight',nzDuration: 4500,nzMaxStack: 7,nzPauseOnHover: true,nzAnimate: true,}},};
Ng-alain 全局配置
ng-alain 全局配置也有修改，如果有使用，建議參考下它最新的文件結構以及配置（global-config.module.ts）
https://github.com/ng-alain/n…
命令行和控制台報錯修改
// 運行npm run start
missing dependencies
ERROR in The target entry-point “@synyi/pf-ui” has missing dependencies: – @synyi /synyi-icons
// 查看node_module里@synyi/pf-ui的package.json文件，發現依賴的angular版本是6或者7，所以先去除這個依賴包了npm uninstall @synyi/pf-uinpm uninstall @synyi/pf-ui-assets
js does not exist
An unhandled exception occurred: Script file node_modules/@antv/data-set/dist/data-set.min.jsdoes not exist.See”/private/var/folders/4l/9xhp7c751mq28sxghp64spf40000gn/T/ng-rA3RZ5/angular-errors.log” for further details.
// 可以去路徑下查看下這個文件，修改angular.json文件// 前node_modules/@antv/data-set/dist/data-set.min.js// 后node_modules/@antv/data-set/dist/data-set.js
ModuleWithProviders<T> error
error TS2314: Generic type ‘ModuleWithProviders<T>’ requires 1 type argument(s).
// 全局搜索ModuleWithProviders函數 添加下ModuleWithProviders<T>,這個T是你return的類型// 前public static forRoot(): ModuleWithProviders {return {ngModule: DelonModule,providers: [...reuseTabProvides, ...globalConfigProvides],};}// 后public static forRoot(): ModuleWithProviders<DelonModule> {return {ngModule: DelonModule,providers: [...reuseTabProvides, ...globalConfigProvides],};}
‘getInstance’ does not exist
Property ‘getInstance’ does not exist on type ‘NzModalRef<any, any>’.
// 全局搜索 getInstance// 前modal.getInstance().getContentComponentRef();// 后modal.componentInstance.getContentComponentRef();
‘core-js/es6/array’ not found
ERROR in ./src/polyfills.ts Module not found: Error: Can’t resolve ‘core-js/es6/array’ in ‘/Users/xuhailin/Documents/synyi/emr-front/src’
// polyfills.ts文件// 前import 'core-js/es6/symbol';import 'core-js/es6/object';import 'core-js/es6/function';import 'core-js/es6/parse-int';import 'core-js/es6/parse-float';import 'core-js/es6/number';import 'core-js/es6/math';import 'core-js/es6/string';import 'core-js/es6/date';import 'core-js/es6/array';import 'core-js/es7/array';import 'core-js/es6/regexp';import 'core-js/es6/map';import 'core-js/es6/weak-map';import 'core-js/es6/set';// 后import 'core-js/es/symbol';import 'core-js/es/object';import 'core-js/es/function';import 'core-js/es/parse-int';import 'core-js/es/parse-float';import 'core-js/es/number';import 'core-js/es/math';import 'core-js/es/string';import 'core-js/es/date';import 'core-js/es/array';import 'core-js/es/array';import 'core-js/es/regexp';import 'core-js/es/map';import 'core-js/es/weak-map';import 'core-js/es/set';
ng-alain styles error
ng-alain：’~@delon/theme/styles/index’ wasn’t found. Tried – /Users/xuhailin/Documents/synyi/emr-front/src/~@delon/theme/styles/index.less
// styles.less文件，全局搜~@delon/theme/styles/index也行// 前@import '~@delon/theme/styles/layout/default/index';@import '~@delon/theme/styles/layout/fullscreen/index';// 后@import '~@delon/theme/layout/default/index';@import '~@delon/theme/layout/fullscreen/index';
ng-alain forRoot報錯
ng-alain: forRoot()報錯：直接去除forRoot即可
tooltip報錯
ng-zorro-antd：tooltip相關報錯，最好看下文檔
// 前this._placement = value;this.updateCompValue('nzPlacement', value);// 后this.specificPlacement = value;
Module build failed
Module build failed： ERROR in ./src/app/features/config-center/config-center.module.ts Module build failed (from ./node_modules/@ngtools/webpack/src/index.js):
// tsconfig.json{"module": "esnext",}// 全局搜索loadChildren，改為import// 前：{path: 'config-center',loadChildren: './config-center/config-center.module#ConfigCenterModule',},// 后：{path: 'config-center',loadChildren: () => import('./config-center/config-center.module').then((m) => m.ConfigCenterModule),},
其他報錯及警告
import { deepCopy } from ‘@delon/util’;報錯
// 如果用了loadsh最好統一使用lodash的cloneDeep方法import { cloneDeep } from 'lodash';
WARNING：CommonJS or AMD dependencies can cause optimization bailouts
// angular.json文件"allowedCommonJsDependencies": ["@ant-design/colors","@antv/adjust",]
TypeError: Found non-callable @@iterator
// tsconfig.json{"target": "es5"}
Error: /Users/xuhailin/Documents/synyi/emr-front/src/app/features/config-center/config-center.module.ts is missing from the TypeScript compilation. Please make sure it is in your tsconfig via the ‘files’ or ‘include’ property.
// tsconfig.json, 增加files屬性{"compilerOptions": {}"files": ["src/main.ts","src/polyfills.ts"]}
core.js:4352 ERROR TypeError: Invalid attempt to spread non-iterable instance.In order to be iterable, non-array objects must have a [Symbol.iterator]() method.
// 建議調試一下，看一下哪里報錯，一般是用了擴展符報錯的。// 前setHeaders: {Authorization: authToken,DeptId: user && user.loginDept.id || 0,// ...},// 后, headers里面的value是數組或者字符串，不能是數字setHeaders: {Authorization: authToken,DeptId: user && user.loginDept.id + '' || '0',// ...},
界面出來后的細節修改
具體查看組件庫的文檔，細節挺多的。
icon組件typehtml屬性寫法更換為nzType。popconfirmpopovertooltip等組件屬性修改變動較大。tab組件的樣式名稱更改，比如.ant-tab-bar改為.ant-tab-nav。@lodash改為@lodash/clondeepicon支持iconfont圖標nz-tab支持路由導航nzLinkRouterngx-prefect-scrollbar改為ngx-scrolllbar,prefect-scrollbar10以后的版本就不再支持了。modal組件的nzWidth不在支持數字,設置寬度的時候加上px單位。
來自程序員燈塔：angular 6-10