ionic4中引入ng-zorro, 实现环形进度条

1、创建项目

ionic start myIonic tabs --type=angular

2、安装ng-zorro 这个模块依赖动画模块，所以安装两个插件

npm install @angular/animations@4.4.4 --save --save-exact

npm install ng-zorro-antd --save

3、配置ionic4默认tabs路由懒加载，所以需要这样配置
app.modules.ts

...
import { NgZorroAntdModule, NZ_I18N, zh_CN } from 'ng-zorro-antd';

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [NgZorroAntdModule.forRoot(), BrowserModule, IonicModule.forRoot(), AppRoutingModule],
...

home.module.ts中使用

...
import { NgZorroAntdModule } from 'ng-zorro-antd';
@NgModule({
  imports: [
    IonicModule,
    CommonModule,
    NgZorroAntdModule,
...

home.page.html 就可以使用了

<nz-progress [nzPercent]="75" nzType="circle"></nz-progress>

最后配置一下样式文件 angular.json

 "styles": [
              {
                "input": "src/theme/variables.scss"
              },
              {
                "input": "src/global.scss"
              },
              {
                "input": "node_modules/ng-zorro-antd/src/ng-zorro-antd.min.css"
              }
            ],

共用的一些module可以自定义一个common-page.module.ts

具体实现代码
1、common-page.module.ts

import { NgModule } from '@angular/core';
import { NgZorroAntdModule } from 'ng-zorro-antd';

@NgModule({
    imports: [ NgZorroAntdModule ],
    exports: [ NgZorroAntdModule ]
})
export class CommonPageModule {}

2、home.module.ts

import { IonicModule } from '@ionic/angular';
import { RouterModule } from '@angular/router';
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { HomePage } from './home.page';
import { CommonPageModule } from './../common-page.module';
@NgModule({
    imports: [
        IonicModule,
        CommonModule,
        FormsModule,
        CommonPageModule,
        RouterModule.forChild([ { path: '', component: HomePage } ])
    ],
    declarations: [ HomePage ]
})
export class HomePageModule {}

3、home.page.html

<ion-header>
  <ion-toolbar>
    <ion-title>Home</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content padding>
  <nz-progress [nzPercent]="75" nzType="circle"></nz-progress>
</ion-content>