Angular 项目创建及添加 Antd UI组件

前提条件：

在开始之前，请确保你的开发环境中包括Node.js®和 npm 包管理器。

Node.js

Angular需要 Node.js 版本 10.9.0 或更高版本。https://nodejs.org/en/

npm包管理器

Angular、Angular CLI 和 Angular 应用都依赖于 npm 包中提供的特性和功能。

要想下载并安装npm包，你必须拥有一个 npm 包管理器。https://docs.npmjs.com/cli/install

npm 转 cnpm

npm install -g cnpm --registry=https://registry.npm.taobao.org

创建angular项目：

https://angular.cn/docs

第1步：安装 Angular CLI

你可以使用Angular CLI来创建项目、生成应用和库代码，以及执行各种持续开发任务， 比如测试、打包和部署。全局安装Angular CLI。要使用cnpm命令安装 CLI，请打开终端/控制台窗口，输入如下命令：

cnpm install -g @angular/cli

第2步：创建工作空间和初始应用

运行CLI命令 ng new 并提供 my-app 名称作为参数，如下所示：

ng new my-app

ng new命令会提示你提供要把哪些特性包含在初始应用中。按Enter或 Return 键 可以接受默认值。

第3步：运行应用

转到workspace文件夹（my-app）

cd my-app

使用CLI命令 ng serve --open 或 npm start 来启动服务器。

ng serve --open

npm start

安装 Ant Design of Angular UI组件：

https://ng.ant.design/docs/introduce/zh

第1步：安装ng zorro组件

cnpm install ng-zorro-antd --save

第2步：导入模块 app.module.ts

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

@NgModule({

   imports: [

    /**导入 ng-zorro-antd 模块 **/

     NgZorroAntdModule

   ],

   /**配置 ng-zorro-antd 国际化（文案 及 日期） **/

   providers: [{ provide: NZ_I18N, useValue: zh_CN }],

})

第3步：引入样式 styles.css

@import "~ng-zorro-antd/src/ng-zorro-antd.css";