Visual Studio 2019 で Ant Design of Angular を使う

VS2019でASP.NET Core Webアプリケーション(Angular)を作ろうとした際にはまったのでメモです。
まだ触り始めたばかりなので、細かい設定は間違ってたりするかもしれません。

参考サイト

Ant Design of Angular - NG-ZORRO

前提

• Visual Studio Community 2019 (Version16.4.2)
• .NET Core (ASP.NET Core 3.1)
• ASP.NET Core Webアプリケーション(Angular)
• Ant Design of Angular

導入方法

1. ASP.NET Core Webアプリケーション(Angular)を作成

「新しいプロジェクトの作成」からポチポチ進んでいくとできます。

2. ng-zorro-antdをインストール

1. 開発者コマンドプロンプトを起動する
   • ツール(T) > コマンドライン(L) > 開発者用コマンドプロンプト(C)
2. コマンドプロンプトで下記のコマンドを実行
   • cd <プロジェクト名>\ClientApp
   • npm install ng-zorro-antd

3. app.module.tsを修正する

テンプレートで作成されたapp.module.tsに必要な文言を追加する。
参考サイト: Getting Started - NG-ZORRO

app.module.ts

//...(省略)...
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NgZorroAntdModule, NZ_I18N, en_US } from 'ng-zorro-antd';

//...(省略)...

/** config angular i18n **/
import { registerLocaleData } from '@angular/common';
import en from '@angular/common/locales/en';
registerLocaleData(en);

@NgModule({
  //...(省略)...
  imports: [
    //...(省略)...
    BrowserAnimationsModule,
    NgZorroAntdModule
  ],
  providers: [
    { provide: NZ_I18N, useValue: en_US }
  ],
  //...(省略)...
})
export class AppModule { }

4. angular.jsonを修正する

テンプレートで作成されたangular.jsonに必要な文言を追加する。
参考サイト: Getting Started - NG-ZORRO

angular.json

{
  "assets": [
    //...(省略)...
    {
      "glob": "**/*",
      "input": "./node_modules/@ant-design/icons-angular/src/inline-svg/",
      "output": "/assets/"
    }
  ],
  "styles": [
    //...(省略)...
    "node_modules/ng-zorro-antd/ng-zorro-antd.min.css"
  ]
}

5. Componentを利用する

Ant Design of Angular - NG-ZORRO を参考に、Componentを利用する。

[備考] うまくいかなかった方法

Visual Studio 2019から下記の手順で追加しようとすると、「復元中...」から先に進まずうまくいきませんでした。
設定が間違っているだけで、うまく使う方法があるのかもしれません。

1. ClientAppのフォルダ上で右クリック
2. 追加(D) > クライアント側のライブラリ(L)
3. プロバイダーをunpkg、ライブラリをng-zorro-antdで検索
4. ライブラリが表示されるまで待つ
5. ターゲットロケーションをClientApp/node_module/ng-zorro-antdに設定
6. インストール(I)を選択