angular升级 6-10

coozz

原文链接:http://101.200.60.78/archives...

当前:
angular 6 `ng-zorro-antd 1.8.1
ng-alain 1.8.1
`

目标:
angular 10 `ng-zorro-antd 10
ng-alain 10
`

准备工作

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

// 全局cli升级到最新
ng version
npm 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-ui
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.

// 可以去路径下查看下这个文件,修改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
  • 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

angular10升级文档-中文
angular升级支持-官网

ng-zorro-antd

ng-zorro-antd升级文档
ng-zorro-antd日志文档

ng-alain

ng-alain升级文档

阅读 2.1k
19 声望
0 粉丝
0 条评论
19 声望
0 粉丝
文章目录
宣传栏