Angular項目中添加全局樣式ng-zorro

自己在創建angular項目的時候，使用ng-zorro UI組件庫，遇到安裝之後，不生效的問題，是沒有正確引入，其實官方文檔也提到了。

官網地址：https://ng.ant.design/docs/getting-started/zh

1. 安裝腳手架工具#

使用 @angular/cli 前，務必確認 Node.js 已經升級到 v12.1 或以上，強烈建議升級至最新版本的 @angular/cli。 如果你想了解更多CLI工具鏈的功能和命令，建議訪問 Angular CLI 瞭解更多。

$ npm install -g @angular/cli

2. 創建一個項目#

在創建項目之前，請確保 @angular/cli 已被成功安裝。

執行以下命令，@angular/cli 會在當前目錄下新建一個名稱爲 PROJECT-NAME 的文件夾，並自動安裝好相應依賴。

$ ng new PROJECT-NAME

3. 初始化配置#

進入項目文件夾，執行以下命令後將自動完成 ng-zorro-antd 的初始化配置，包括引入國際化文件，導入模塊，引入樣式文件等工作。

$ ng add ng-zorro-antd

 

開發者可以通過增加參數來完成個性化的初始化配置，例如國際化或者自定義主題等，詳細可以參考 腳手架 部分。

4. 開發調試#

一鍵啓動調試，運行成功後顯示歡迎頁面。

$ ng serve --port 0 --open

 

5. 構建和部署#

$ ng build --prod

入口文件會構建到 dist 目錄中，你可以自由部署到不同環境中進行引用。

自行構建#

如果想自己維護工作流，理論上你可以利用 Angular 生態圈中的 各種腳手架進行開發，如果遇到問題可參考我們所使用的 配置 進行定製。

1. 安裝組件#

$ npm install ng-zorro-antd --save

2.引入模塊#

import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
import { NgZorroAntdModule, NZ_I18N, zh_CN } from 'ng-zorro-antd';
import { AppComponent } from './app.component';

/** 配置 angular i18n **/
import { registerLocaleData } from '@angular/common';
import zh from '@angular/common/locales/zh';
registerLocaleData(zh);

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpClientModule,
    BrowserAnimationsModule,
    /** 導入 ng-zorro-antd 模塊 **/
    NgZorroAntdModule
  ],
  bootstrap: [ AppComponent ],
  /** 配置 ng-zorro-antd 國際化（文案 及 日期） **/
  providers   : [
    { provide: NZ_I18N, useValue: zh_CN }
  ]
})
export class AppModule { }

這樣就成功在全局引入了 ng-zorro-antd。

3. 引入樣式與 SVG 資源#

在 angular.json 文件中引入樣式和 SVG icon 資源。

如果需要自定義主題樣式，請參考自定義主題部分。

{
  "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、在搭建好的工程中，找到

在使用ng g ng-zorro-antd:form-normal-login -p app --styleext='less' --name=login添加component時，

會報錯找不到文件，這時可以使用ng g ng-zorro-antd:form-normal-login -p app  --name=login 生成，將css文件的擴展名改爲.css文件，或者使用：ng g ng-zorro-antd:form-normal-login -p app --styleext=less --name=login ，將less的單引號去除。

在添加了component之後，需要在app.module.ts中導入相應的module,該模塊就可以正常工作了。
原文鏈接：https://blog.csdn.net/shuididishui007/article/details/81047880