前言

首先感謝下 cipchk基於 Ng-Zorror 框架上制作的ng-alain 。

之前很早就關註了 ng-alain，今天得空折騰了下。
折騰的時候發現官方文檔有些坑，沒有寫清楚，所以我作為一些補充吧~
之前在微軟MVP群裏，董斌輝邀請了cipchk做了一次分享，厚著臉皮要了PPT，看了看ng-alin的定位。跟我的項目契合度 很高。那麽我們就試試水唄。

正文

說事情，要PPT別找我。

如何使用 安裝&配置

第一種方式:

直接 clone git 倉庫

$ git clone --depth=1 https://github.com/cipchk/ng-alain.git my-project

cd my-project

# 安裝依賴包
npm install

# 啟動
npm start

# 使用HMR啟動
npm run serve:hmr
 

成功運行了是吧，但是有個問題？我們要是真在這上面開發功能，那不是GG了。刪除一大堆組件都累死了。
所以Ng-alain提供了一個腳手架構建工具@delon。
這就是我提高的第二種方式。

@delon/cli 是基於 Angular Cli 向上構建的針對 ng-alain 腳手架的命令行工具，因此在安裝之前要先確保以下類庫應該安裝：

第二種（推薦方式）

因為官方的文檔有坑，所以才有這篇文檔~

安裝&配置

首先我們要安裝

npm install -g @angular-devkit/core @angular-devkit/schematics @schematics/schematics rxjs
npm install -g @angular/cli
 

@delon/cli 允許你全局安裝或只針對本地項目，對於全局後期所有命令都無需填寫 --collection 選項。

全局安裝：

npm install -g @delon/cli

我們先是使用@AngularCli工具生成一個項目。

ng new my-dream-app

默認進行npm包的下載。

運行程序保證不報錯，這一步蠻重要的。
npm start

然後我們幹一個事情，

然後設置 .angular-cli.json 的默認 collection：

"defaults": {
  "schematics": {
    "collection": "@delon/cli"
  }
}
 

進入到my-dream-app文件夾中
然後我們刪除其他不需要的文件。

這個時候再來執行，

npm install @delon/cli --save-dev

安裝@delon/cli到本地，然後就可以創建ng-alain的模板了

ng new -c=@delon/cli lonely 

然後就是慢慢等待包的還原，還原完畢後。

cd lonely
npm start

編譯完成後自動會打開http://localhost:4200/#/dashboard
最後的效果圖就是：

以上就是全部了。

尾聲

ng-alain 還很年輕，中間會有很多的bug，作者看起來是全職在搞，畢竟看到PR的人不是很多，我主要是搞後端，後期會用幾個項目和ng-alain進行配套。
最後希望國內高質量的開源項目會越來越多。

• About Me-

• END -

Angular UI框架 Ng-alain @delon的腳手架的生成開發模板