angular7中引用ng zorro antd的三种方式

约定不等于承诺〃 2022-02-27 06:42 486阅读 0赞

在新版本的angular中使用新的ng zorro，按照官方文档一步一步来，没有报错，但是也没有反应。  
试了一下官方的两种方式，第一种方式如果使用cnpm会报错，第二种方式会没有反应，也是因为使用了cnpm安装的缘故。

**官方的第一种方式：**

1. 安装脚手架工具	`npm install -g @angular/cli`
    2. 创建一个项目	`ng new PROJECT-NAME`
    3. 初始化配置	`ng add ng-zorro-antd`
    4. 开发调试	`ng serve --port 0 --open`
    5. 构建和部署	`ng build --prod`

**官方的第二种方式：**

1. 安装组件	`npm install ng-zorro-antd --save`
    2. 引入模块
    	import { HttpClientModule } from '@angular/common/http';
    	imports: [
        BrowserModule,
        NgZorroAntdModule
      ],
    3. 引入样式与 SVG 资源 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"
    	  ]
    	}

#### 正确引入姿势1 ####

如果按照官网的第一个步骤来的话，必须使用npm一次到位，不能中途使用cnpm,否则会报错。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l3MDB5dw_size_16_color_FFFFFF_t_70]  
上述错误出现的原因是因为我的安装步骤如下：

*  ng new demo02 --skip-install
 *  cd demo02
 *  cnpm install
 *  ng add ng-zorro-antd // 到这一步报错
 *  ng serve --port 0 --open

**上述错误的原因是因为第一步终止掉了，使用了cnpm安装了依赖。如果直接使用`ng new demo02`安装，继续后面的步骤就会没有问题，所以说第一种方式严格按照官方的来就可以，只不过有时候直接使用npm安装会报错，多试试几下，也许是网的问题。**

--------------------

#### 正确引入姿势2 ####

还是按照上面的步骤，值得注意的一点是**使用npm安装，切记不能使用cnpm**，这样安装完成之后，只用官网的第二个步骤就可以正确引入并使用。

*  ng new projectName
 *  cd projectName
 *  npm install ng-zorro-antd --save
 *  导入模块：app.module.ts

import { NgZorroAntdModule } from 'ng-zorro-antd';
    
    imports: [
     	BrowserModule,
        NgZorroAntdModule
    ],

*  引入样式与 SVG 资源 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"
    	    //  "node_modules/ng-zorro-antd/src/ng-zorro-antd.min.css"
    	  ]
    	}

--------------------

#### 正确引入姿势3 ####

这种方式可以使用npm或者使用cnpm,两种方式都是可以完成正确引入的。

**一、安装ng zorro组件**

npm install ng-zorro-antd --save

**二、导入模块**

app.module.ts

import { NgZorroAntdModule } from 'ng-zorro-antd';
    
    imports: [
        BrowserModule,
        NgZorroAntdModule
      ],

**三、引入样式**

styles.css

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l3MDB5dw_size_16_color_FFFFFF_t_70]: /images/20220227/9ed6597b05cb416b8010ed494df4efe4.png