Angular-Ant Desigin

1、如果已经有 angulat 项目，直接安装 antd 这个插件然后使用：

npm install ng-zorro-antd --save / cnpm install ng-zorro-antd --save

 2、app.module.ts 文件导入

import { NgModule } from '@angular/core';

import { registerLocaleData } from '@angular/common';

import { BrowserModule } from '@angular/platform-browser';

import { DragDropModule } from '@angular/cdk/drag-drop';

import { ScrollingModule } from '@angular/cdk/scrolling';

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { FormsModule, ReactiveFormsModule } from '@angular/forms';

import { HttpClientJsonpModule, HttpClientModule } from '@angular/common/http';

import en from '@angular/common/locales/en';

import { NZ_ICONS } from 'ng-zorro-antd/icon';

import { NZ_I18N, en_US } from 'ng-zorro-antd/i18n';

import { IconDefinition } from '@ant-design/icons-angular';

import * as AllIcons from '@ant-design/icons-angular/icons';

import { DemoNgZorroAntdModule } from './ng-zorro-antd.module';

import { AppComponent } from './app.component';

registerLocaleData(en);

const antDesignIcons = AllIcons as {

  [key: string]: IconDefinition;

};

const icons: IconDefinition[] = Object.keys(antDesignIcons).map(key => antDesignIcons[key])

@NgModule({

  declarations: [

    AppComponent

  ],

  imports:      [

    BrowserModule,FormsModule,

    HttpClientModule,

    HttpClientJsonpModule,

    ReactiveFormsModule,

    DemoNgZorroAntdModule,

    BrowserAnimationsModule,

    ScrollingModule,

    DragDropModule

  ],

bootstrap:    [ AppComponent ],

providers  : [ { provide: NZ_I18N, useValue: en_US }, { provide: NZ_ICONS, useValue: icons } ]

})

export class AppModule { }

新建一个文件  ng-zorro-antd.module.ts

import { NgModule } from '@angular/core';

import { NzAffixModule } from 'ng-zorro-antd/affix';

import { NzAlertModule } from 'ng-zorro-antd/alert';

import { NzAnchorModule } from 'ng-zorro-antd/anchor';

import { NzAutocompleteModule } from 'ng-zorro-antd/auto-complete';

import { NzAvatarModule } from 'ng-zorro-antd/avatar';

import { NzBackTopModule } from 'ng-zorro-antd/back-top';

import { NzBadgeModule } from 'ng-zorro-antd/badge';

import { NzBreadCrumbModule } from 'ng-zorro-antd/breadcrumb';

import { NzButtonModule } from 'ng-zorro-antd/button';

import { NzCalendarModule } from 'ng-zorro-antd/calendar';

import { NzCardModule } from 'ng-zorro-antd/card';

import { NzCarouselModule } from 'ng-zorro-antd/carousel';

import { NzCascaderModule } from 'ng-zorro-antd/cascader';

import { NzCheckboxModule } from 'ng-zorro-antd/checkbox';

import { NzCollapseModule } from 'ng-zorro-antd/collapse';

import { NzCommentModule } from 'ng-zorro-antd/comment';

import { NzNoAnimationModule } from 'ng-zorro-antd/core/no-animation';

import { NzTransButtonModule } from 'ng-zorro-antd/core/trans-button';

import { NzWaveModule } from 'ng-zorro-antd/core/wave';

import { NzDatePickerModule } from 'ng-zorro-antd/date-picker';

import { NzDescriptionsModule } from 'ng-zorro-antd/descriptions';

import { NzDividerModule } from 'ng-zorro-antd/divider';

import { NzDrawerModule } from 'ng-zorro-antd/drawer';

import { NzDropDownModule } from 'ng-zorro-antd/dropdown';

import { NzEmptyModule } from 'ng-zorro-antd/empty';

import { NzFormModule } from 'ng-zorro-antd/form';

import { NzGridModule } from 'ng-zorro-antd/grid';

import { NzI18nModule } from 'ng-zorro-antd/i18n';

import { NzIconModule } from 'ng-zorro-antd/icon';

import { NzInputModule } from 'ng-zorro-antd/input';

import { NzInputNumberModule } from 'ng-zorro-antd/input-number';

import { NzLayoutModule } from 'ng-zorro-antd/layout';

import { NzListModule } from 'ng-zorro-antd/list';

import { NzMentionModule } from 'ng-zorro-antd/mention';

import { NzMenuModule } from 'ng-zorro-antd/menu';

import { NzMessageModule } from 'ng-zorro-antd/message';

import { NzModalModule } from 'ng-zorro-antd/modal';

import { NzNotificationModule } from 'ng-zorro-antd/notification';

import { NzPageHeaderModule } from 'ng-zorro-antd/page-header';

import { NzPaginationModule } from 'ng-zorro-antd/pagination';

import { NzPopconfirmModule } from 'ng-zorro-antd/popconfirm';

import { NzPopoverModule } from 'ng-zorro-antd/popover';

import { NzProgressModule } from 'ng-zorro-antd/progress';

import { NzRadioModule } from 'ng-zorro-antd/radio';

import { NzRateModule } from 'ng-zorro-antd/rate';

import { NzResultModule } from 'ng-zorro-antd/result';

import { NzSelectModule } from 'ng-zorro-antd/select';

import { NzSkeletonModule } from 'ng-zorro-antd/skeleton';

import { NzSliderModule } from 'ng-zorro-antd/slider';

import { NzSpinModule } from 'ng-zorro-antd/spin';

import { NzStatisticModule } from 'ng-zorro-antd/statistic';

import { NzStepsModule } from 'ng-zorro-antd/steps';

import { NzSwitchModule } from 'ng-zorro-antd/switch';

import { NzTableModule } from 'ng-zorro-antd/table';

import { NzTabsModule } from 'ng-zorro-antd/tabs';

import { NzTagModule } from 'ng-zorro-antd/tag';

import { NzTimePickerModule } from 'ng-zorro-antd/time-picker';

import { NzTimelineModule } from 'ng-zorro-antd/timeline';

import { NzToolTipModule } from 'ng-zorro-antd/tooltip';

import { NzTransferModule } from 'ng-zorro-antd/transfer';

import { NzTreeModule } from 'ng-zorro-antd/tree';

import { NzTreeSelectModule } from 'ng-zorro-antd/tree-select';

import { NzTypographyModule } from 'ng-zorro-antd/typography';

import { NzUploadModule } from 'ng-zorro-antd/upload';

import { NzResizableModule } from 'ng-zorro-antd/resizable';

@NgModule({

  exports: [

    NzAffixModule,

    NzAlertModule,

    NzAnchorModule,

    NzAutocompleteModule,

    NzAvatarModule,

    NzBackTopModule,

    NzBadgeModule,

    NzButtonModule,

    NzBreadCrumbModule,

    NzCalendarModule,

    NzCardModule,

    NzCarouselModule,

    NzCascaderModule,

    NzCheckboxModule,

    NzCollapseModule,

    NzCommentModule,

    NzDatePickerModule,

    NzDescriptionsModule,

    NzDividerModule,

    NzDrawerModule,

    NzDropDownModule,

    NzEmptyModule,

    NzFormModule,

    NzGridModule,

    NzI18nModule,

    NzIconModule,

    NzInputModule,

    NzInputNumberModule,

    NzLayoutModule,

    NzListModule,

    NzMentionModule,

    NzMenuModule,

    NzMessageModule,

    NzModalModule,

    NzNoAnimationModule,

    NzNotificationModule,

    NzPageHeaderModule,

    NzPaginationModule,

    NzPopconfirmModule,

    NzPopoverModule,

    NzProgressModule,

    NzRadioModule,

    NzRateModule,

    NzResultModule,

    NzSelectModule,

    NzSkeletonModule,

    NzSliderModule,

    NzSpinModule,

    NzStatisticModule,

    NzStepsModule,

    NzSwitchModule,

    NzTableModule,

    NzTabsModule,

    NzTagModule,

    NzTimePickerModule,

    NzTimelineModule,

    NzToolTipModule,

    NzTransButtonModule,

    NzTransferModule,

    NzTreeModule,

    NzTreeSelectModule,

    NzTypographyModule,

    NzUploadModule,

    NzWaveModule,

    NzResizableModule

  ]

})

export class DemoNgZorroAntdModule {

}

app.component.html

Please fork this stackblitz to reproduce your issue.<br><br>请 <strong style="color:red;">Fork</strong> 这个链接来重现你碰到的问题。

<br><br>

<button nz-button nzType="primary"><i nz-icon nzType="trophy"></i>  NG-ZORRO-ANTD Playgroud</button>