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

准备工作

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

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 

标签：core,zorro,alain,js,遇见,antd,import,ng
来源： https://www.cnblogs.com/wujx9/p/15577746.html