angular升级 6-10

头像
coozz
    阅读 7 分钟

    原文链接：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升级文档

    angular6angular
    coozz
    19 声望0 粉丝
    « 上一篇
    css 打字动画

    引用和评论

    推荐阅读
    头像
    微信小程序数据可视化-echarts动态渲染和按需加载

    兔子先森阅读 844

    头像
    12 分钟介绍所有主流 (Web) 框架

    好文收藏阅读 684

    头像
    替代 JIRA！一款功能强大的开源项目管理工具！

    Java陈序员阅读 604

    头像
    浏览器如何确定最终的CSS属性值？解析计算优先级与规则

    已注销阅读 602

    头像
    后续跟进：让客户看到成效

    奔放的炒粉阅读 495

    头像
    本，同时也影响了业务决策的

    已注销阅读 463

    头像
    开始开发 MCP Server

    已注销阅读 448

    0 条评论
    得票最新