在Visual Studio 2019中使用Ant Design of Angular

由于遇到了一些问题，我在尝试使用VS2019创建ASP.NET Core Web应用程序（Angular）时遇到了困难，所以做了一些笔记。由于我刚刚开始接触这个，所以可能会出现一些设置错误。

请参考以下网站

Angular的Ant Design – 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

引入途径

创建一个 ASP.NET Core Web 应用程序（Angular）。

通过点击「新建项目」，然后逐步进行就可以完成。

2. 安装 ng-zorro-antd.

1. 打开开发者命令提示符。

工具(T) > 命令行(L) > 开发者命令提示符(C)

在命令提示符中执行以下命令。

cd <项目名称>\ClientApp
npm install ng-zorro-antd

修改app.module.ts

在使用模板创建的app.module.ts中添加所需的文本。
参考网站：入门-NG-ZORRO

//...(省略)...
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 { }

修改angular.json文件

在使用模版创建的angular.json文件中添加所需的文本。
参考网站：入门 – NG-ZORRO

{
  "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的文件夹上右键点击

1. 添加(D) > 客户端库(L)

1. 在unpkg中搜索提供者，用ng-zorro-antd搜索库

1. 等待库显示

1. 将目标位置设置为ClientApp/node_module/ng-zorro-antd

选择安装(I)