Angular中，模塊加載的幾種方法

 

1、懶加載

   經過路由配置： 

{
        path: 'flight-booking',
        loadChildren: './flight-booking/flight-booking.module#FlightBookingModule'
    }

 

好處：這種方式有利於初始減小加載體積 ， 不須要在app.module.ts中，主動去引入相應的模塊（它們天然不會打包到AppModule中去）。

依賴：主項目必須包含各子模塊的源碼！

2、動態（懶）加載

參照：angular-elements-dashboard  項目。

在anuglar.json中，配置懶加載的模塊路徑：

以後，在被動態加載的模塊中，用public屬性ComponentList，從模塊對象上暴露出來全部的組件類。增長它主要是因爲動態加載後，不方便從NgModuleRef 的變量上，找到這個當前模塊中，到底有哪些組件類，故明確引出。

動態模塊準備好了，那接下來要經過 NgModuleFactoryLoader 類開加載它，而且把當前的root模塊的injector注入到新模塊中去。

如今動態模塊已經加載到主的AppModule中來了，若是要動態添加動態模塊內的組件，就和普通的動態添加組件的技術一致了：  用ViewContainerRef 的一個變量來建立一個組件createComponent,  並插入到指定位置。

同懶加載同樣：

好處：這種方式有利於初始減小加載體積 ， 不須要在app.module.ts中，主動去引入相應的模塊（它們天然不會打包到AppModule中去）。

依賴：主項目必須包含各子模塊的源碼！

 

3、發佈一個Library

        從Anuglar6開始，一個工程支持多個項目/庫。這裏，每個庫至關於一個模塊包，它一般包含一個Module,多個Service,Component組件等等。而後它能夠構建爲APF(Angular Package Formattor)格式的包，發佈到npm 供別人使用，也能夠在當前項目中被引用。有點相似.Net裏的引用庫 或 Java中的jar包的感受。     

ng generate library my-lib
ng build my-lib --prod
cd dist/my-lib
npm publish

一行代碼未寫，就構建了一個組件，Angular仍是很強大的。

咱們再加一行代碼引用這個myLib模塊：

經過結果，能夠看到它們是打包到一個文件中的。這是因爲在Angular中，模塊只是邏輯代碼隔離的概念， 並不是是打包文件的隔離！