ng-alain技术框架升级遇见的问题

2023-11-24 17:06:46

准备工作

保证本地没有待提交的文件

  1. // 全局cli升级到最新
  2. ng version
  3. npm install -g @angular/cli
  5. // 1. 查看升级到哪些最新版本
  6. ng update
  7. // 2. 强制升级所有依赖，（如果有些依赖是beta版本才支持angular10的，需要加--next）。
  8. ng update --all --force

经过上面步骤，package.json会发生变化，tsconfig.json也可能发生变化。检查下package.json，主要的包是不是达到了预期。

接着准备以下操作：

ng-zorro-antd 分模块导入

  1. // 第一步修改 模块引入修改
  2. // 前：
  3. import { ngZorroModule } from 'ng-zorro-antd';
  4. // 后
  6. import { NzButtonModule } from 'ng-zorro-antd/button';
  7. import { NzCardModule } from 'ng-zorro-antd/card';
  8. import { NzCarouselModule } from 'ng-zorro-antd/carousel';
  9. import { NzCheckboxModule } from 'ng-zorro-antd/checkbox';
  10. import { NzDatePickerModule } from 'ng-zorro-antd/date-picker';
  12. // 第二步 全局搜索 'ng-zorro-antd', 一个一个文件的修改，差不多都能看出来是哪个模块的
  13. // 前
  14. import { VERSION as VERSION_ZORRO, NzModalService } from 'ng-zorro-antd';
  15. // 后
  16. import { NzModalService } from 'ng-zorro-antd/modal';
  17. import { VERSION as VERSION_ZORRO } from 'ng-zorro-antd/version';
  19. // 第三步， 遇到一些特殊的不太好改的，比如组件名，服务都找不到了，那就去看文档使用吧。
  20. // 前
  21. import { NzDropdownContextComponent, NzDropdownService } from 'ng-zorro-antd';
  22. // 后，用法也改变了
  23. import { NzContextMenuService, NzDropdownMenuComponent } from 'ng-zorro-antd/dropdown';

ng-zorro-antd 全局配置修改

  1. // 前：
  2. import { NZ_NOTIFICATION_CONFIG } from 'ng-zorro-antd';
  3. const notificationConfig = {
  4. provide: NZ_NOTIFICATION_CONFIG,
  5. useValue: {
  6. nzTop: '24px',
  7. nzBottom: '24px',
  8. nzPlacement: 'topRight',
  9. nzDuration: 4500,
  10. nzMaxStack: 7,
  11. nzPauseOnHover: true,
  12. nzAnimate: true,
  13. },
  14. };
  16. providers: [notificationConfig]
  18. // 后
  19. import { NZ_CONFIG } from 'ng-zorro-antd/core/config';
  20. const zorroConfig = {
  21. provide: NZ_CONFIG,
  22. useValue: {
  23. notification: {
  24. nzTop: '24px',
  25. nzBottom: '24px',
  26. nzPlacement: 'topRight',
  27. nzDuration: 4500,
  28. nzMaxStack: 7,
  29. nzPauseOnHover: true,
  30. nzAnimate: true,
  31. }
  32. },
  33. };

Ng-alain 全局配置

ng-alain 全局配置也有修改，如果有使用，建议参考下它最新的文件结构以及配置（global-config.module.ts）

https://github.com/ng-alain/n…

命令行和控制台报错修改

  1. // 运行
  2. npm run start

missing dependencies

ERROR in The target entry-point “@synyi/pf-ui” has missing dependencies: – @synyi /synyi-icons

  1. // 查看node_module里@synyi/pf-ui的package.json文件，发现依赖的angular版本是6或者7，所以先去除这个依赖包了
  2. npm uninstall @synyi/pf-ui
  3. npm 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.

  1. // 可以去路径下查看下这个文件，修改angular.json文件
  2. // 前
  3. node_modules/@antv/data-set/dist/data-set.min.js
  4. // 后
  5. node_modules/@antv/data-set/dist/data-set.js

ModuleWithProviders<T> error

error TS2314: Generic type ‘ModuleWithProviders<T>’ requires 1 type argument(s).

  1. // 全局搜索ModuleWithProviders函数 添加下ModuleWithProviders<T>,这个T是你return的类型
  2. // 前
  3. public static forRoot(): ModuleWithProviders {
  4. return {
  5. ngModule: DelonModule,
  6. providers: [...reuseTabProvides, ...globalConfigProvides],
  7. };
  8. }
  9. // 后
  10. public static forRoot(): ModuleWithProviders<DelonModule> {
  11. return {
  12. ngModule: DelonModule,
  13. providers: [...reuseTabProvides, ...globalConfigProvides],
  14. };
  15. }

‘getInstance’ does not exist

Property ‘getInstance’ does not exist on type ‘NzModalRef<any, any>’.

  1. // 全局搜索 getInstance
  2. // 前
  3. modal.getInstance().getContentComponentRef();
  4. // 后
  5. 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’

  1. // polyfills.ts文件
  2. // 前
  3. import 'core-js/es6/symbol';
  4. import 'core-js/es6/object';
  5. import 'core-js/es6/function';
  6. import 'core-js/es6/parse-int';
  7. import 'core-js/es6/parse-float';
  8. import 'core-js/es6/number';
  9. import 'core-js/es6/math';
  10. import 'core-js/es6/string';
  11. import 'core-js/es6/date';
  12. import 'core-js/es6/array';
  13. import 'core-js/es7/array';
  14. import 'core-js/es6/regexp';
  15. import 'core-js/es6/map';
  16. import 'core-js/es6/weak-map';
  17. import 'core-js/es6/set';
  18. // 后
  19. import 'core-js/es/symbol';
  20. import 'core-js/es/object';
  21. import 'core-js/es/function';
  22. import 'core-js/es/parse-int';
  23. import 'core-js/es/parse-float';
  24. import 'core-js/es/number';
  25. import 'core-js/es/math';
  26. import 'core-js/es/string';
  27. import 'core-js/es/date';
  28. import 'core-js/es/array';
  29. import 'core-js/es/array';
  30. import 'core-js/es/regexp';
  31. import 'core-js/es/map';
  32. import 'core-js/es/weak-map';
  33. 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

  1. // styles.less文件，全局搜~@delon/theme/styles/index也行
  2. // 前
  3. @import '~@delon/theme/styles/layout/default/index';
  4. @import '~@delon/theme/styles/layout/fullscreen/index';
  5. // 后
  6. @import '~@delon/theme/layout/default/index';
  7. @import '~@delon/theme/layout/fullscreen/index';

ng-alain forRoot报错

ng-alain: forRoot()报错：直接去除forRoot即可

tooltip报错

ng-zorro-antd：tooltip相关报错，最好看下文档

  1. // 前
  2. this._placement = value;
  3. this.updateCompValue('nzPlacement', value);
  4. // 后
  5. 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):

  1. // tsconfig.json
  2. {
  3. "module": "esnext",
  4. }
  5. // 全局搜索loadChildren，改为import
  6. // 前：
  7. {
  8. path: 'config-center',
  9. loadChildren: './config-center/config-center.module#ConfigCenterModule',
  10. },
  11. // 后：
  12. {
  13. path: 'config-center',
  14. loadChildren: () => import('./config-center/config-center.module')
  15. .then((m) => m.ConfigCenterModule),
  16. },

其他报错及警告

import { deepCopy } from ‘@delon/util’;报错

  1. // 如果用了loadsh最好统一使用lodash的cloneDeep方法
  2. import { cloneDeep } from 'lodash';

WARNING：CommonJS or AMD dependencies can cause optimization bailouts

  1. // angular.json文件
  2. "allowedCommonJsDependencies": [
  3. "@ant-design/colors",
  4. "@antv/adjust",
  5. ]

TypeError: Found non-callable @@iterator

  1. // tsconfig.json
  2. {
  3. "target": "es5"
  4. }

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.

  1. // tsconfig.json, 增加files属性
  2. {
  3. "compilerOptions": {}
  4. "files": [
  5. "src/main.ts",
  6. "src/polyfills.ts"
  7. ]
  8. }

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.

  1. // 建议调试一下，看一下哪里报错，一般是用了扩展符报错的。
  2. // 前
  3. setHeaders: {
  4. Authorization: authToken,
  5. DeptId: user && user.loginDept.id || 0,
  6. // ...
  7. },
  8. // 后, headers里面的value是数组或者字符串，不能是数字
  9. setHeaders: {
  10. Authorization: authToken,
  11. DeptId: user && user.loginDept.id + '' || '0',
  12. // ...
  13. },

界面出来后的细节修改

具体查看组件库的文档，细节挺多的。

  • icon组件 typehtml属性写法更换为nzType。
  • popconfirm popover tooltip 等组件属性修改变动较大。
  • tab组件的样式名称更改，比如.ant-tab-bar改为.ant-tab-nav。
  • @lodash改为@lodash/clondeep
  • icon支持iconfont图标
  • nz-tab支持路由导航nzLinkRouter
  • ngx-prefect-scrollbar改为ngx-scrolllbar, prefect-scrollbar10以后的版本就不再支持了。
  • modal组件的nzWidth不在支持数字,设置宽度的时候加上px单位。

 

来自程序员灯塔：angular 6-10 

上一篇：React-Antd-表单-时间类控件


下一篇：antd ~~~ a-table 整行添加class样式