小編給大家分享一下angular7中引用ng zorro antd的方法，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

創(chuàng)新互聯(lián)是一家專注于網(wǎng)站制作、網(wǎng)站建設(shè)與策劃設(shè)計(jì),克山網(wǎng)站建設(shè)哪家好?創(chuàng)新互聯(lián)做網(wǎng)站,專注于網(wǎng)站建設(shè)十余年,網(wǎng)設(shè)計(jì)領(lǐng)域的專業(yè)建站公司;建站業(yè)務(wù)涵蓋:克山等地區(qū)。克山做網(wǎng)站價(jià)格咨詢:18982081108

在angular7中使用新的ng zorro，按照官方文檔一步一步來(lái)，沒(méi)有報(bào)錯(cuò)，但是也沒(méi)有反應(yīng)。
試了一下官方的兩種方式，第一種方式如果使用cnpm會(huì)報(bào)錯(cuò)，第二種方式會(huì)沒(méi)有反應(yīng)，也是因?yàn)槭褂昧薱npm安裝的緣故。

官方的第一種方式：

1. 安裝腳手架工具	`npm install -g @angular/cli`
2. 創(chuàng)建一個(gè)項(xiàng)目	`ng new PROJECT-NAME`
3. 初始化配置	`ng add ng-zorro-antd`
4. 開(kāi)發(fā)調(diào)試	`ng serve --port 0 --open`
5. 構(gòu)建和部署	`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"
	  ]
	}

正確引入姿勢(shì)1

如果按照官網(wǎng)的第一個(gè)步驟來(lái)的話，必須使用npm一次到位，不能中途使用cnpm,否則會(huì)報(bào)錯(cuò)。

上述錯(cuò)誤出現(xiàn)的原因是因?yàn)槲业陌惭b步驟如下：

• ng new demo02 --skip-install

• cd demo02

• cnpm install

• ng add ng-zorro-antd // 到這一步報(bào)錯(cuò)

• ng serve --port 0 --open

上述錯(cuò)誤的原因是因?yàn)榈谝徊浇K止掉了，使用了cnpm安裝了依賴。如果直接使用ng new demo02安裝，繼續(xù)后面的步驟就會(huì)沒(méi)有問(wèn)題，所以說(shuō)第一種方式嚴(yán)格按照官方的來(lái)就可以，只不過(guò)有時(shí)候直接使用npm安裝會(huì)報(bào)錯(cuò)，多試試幾下，也許是網(wǎng)的問(wèn)題。

---

正確引入姿勢(shì)2

還是按照上面的步驟，值得注意的一點(diǎn)是使用npm安裝，切記不能使用cnpm，這樣安裝完成之后，只用官網(wǎng)的第二個(gè)步驟就可以正確引入并使用。

• ng new projectName

• cd projectName

• npm install ng-zorro-antd --save

• 導(dǎo)入模塊：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"
	  ]
	}

---

正確引入姿勢(shì)3

這種方式可以使用npm或者使用cnpm,兩種方式都是可以完成正確引入的。

1、安裝ng zorro組件

npm install ng-zorro-antd --save

2、導(dǎo)入模塊

app.module.ts

import { NgZorroAntdModule } from 'ng-zorro-antd';

imports: [
    BrowserModule,
    NgZorroAntdModule
  ],

3、引入樣式

styles.css

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

以上是“angular7中引用ng zorro antd的方法”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

新聞名稱：angular7中引用ngzorroantd的方法
文章起源：http://chinadenli.net/article48/jigihp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供虛擬主機(jī)、標(biāo)簽優(yōu)化、軟件開(kāi)發(fā)、營(yíng)銷型網(wǎng)站建設(shè)、外貿(mào)建站、品牌網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)