寫在前面

由于現(xiàn)在網(wǎng)絡(luò)上Angular 4的相關(guān)技術(shù)文檔不是很充分，我寫出這個采坑的記錄文檔，一方面是想給自己在項(xiàng)目中遇到的各種問題與個人的理解記錄下來，另一方面也想著某些坑大家可能也會遇到，也可以給道友做一個參考。文檔中的很多地方多有不足，后期我會慢慢完善，也希望道友們能夠及時指出文檔中不正確的與可以優(yōu)化的地方。

我計(jì)劃將該幫助文檔分為4個章節(jié):

章節(jié)一：

關(guān)于angular 4 + ng-zorro在基礎(chǔ)布局與模塊拆分上的一些問題與操作步驟

章節(jié)二：

angular 4 引入路由=> 組件模塊化#module模塊化=>  路由模塊化（路由按需加載）

章節(jié)三：

引入攔截器，統(tǒng)一管理請求與相應(yīng)=>引入http服務(wù)進(jìn)行通訊=>引入service服務(wù)與后臺進(jìn)行通訊=>拆分service服務(wù)=> 應(yīng)用觀察者模式對數(shù)據(jù)進(jìn)行發(fā)布與訂閱

章節(jié)四：

項(xiàng)目打包=>優(yōu)化

============================= Begin ===============================

章節(jié)一：關(guān)于angular 4 + ng-zorro在基礎(chǔ)布局與模塊拆分上的一些問題與操作步驟

在使用阿里爸爸推出的Ng-zorro前，希望你先確保本地的angular-cli版本是最新的版本，目前最新的版本為1.6.3（2018/1/10） *兼容問題可能會導(dǎo)致后期項(xiàng)目打包后部門js丟失

如果你本地已經(jīng)全局安裝了cli或者已經(jīng)使用相對較舊的版本創(chuàng)建了angular 的項(xiàng)目，那么你可以按照下面的命令去更新你本地與項(xiàng)目中的cli版本去兼容ng-zorro：

首先需要先卸載本地的angular-cli安裝包：

npm uninstall -g angular-clinpm uninstall --save-dev angular-cli

在全局安裝最新版本的cli包：

npm uninstall -g @angular/clinpm cache cleannpm install -g @angular/cli@latest

你可以通過cmd命令行，使用 ng -v 去看到本地目前cli的版本。如果你已經(jīng)安裝了最新的版本，你可以使用新版本的ng命令： [ng new "項(xiàng)目名稱" ]來創(chuàng)建一個新的angular 項(xiàng)目。如果你已經(jīng)有angular項(xiàng)目了，那你需要去更新項(xiàng)目中的cli版本。具體的命令如下：

rmdir -rf node_modules dist npm install --save-dev @angular/cli@latestnpm install

如果你完成了上面的操作，你可以打開package.json來看到你項(xiàng)目中的cli版本已經(jīng)更換到了最新版本了。

在使用ng-zorro的過程中，需要注意兩點(diǎn)：

Ng-zorro并不能一次引入在多組件里進(jìn)行使用，如果你的項(xiàng)目中存在子module，相關(guān)的依賴包需要在子module里進(jìn)行引入。需要注意的是，你必須在module里通過forRoot()方法去使用。

//主moduleimports: [BrowserModule,FormsModule,HttpClientModule,NgZorroAntdModule.forRoot(),BrowserAnimationsModule]

在子module里，就不再需要forRoot()方法了: