動態加載模塊與webpack和angular2

我有一個angular2應用程序結構與4個子應用程序，需要一些常見的配置。這些子應用程序是相互獨立的。我正在使用webpack進行動態加載和代碼分割。每個子應用程序在從.ts文件轉換後都將擁有自己的js文件。我想要將js文件分別捆綁到瀏覽器客戶端加載的子應用程序。動態加載模塊與webpack和angular2

E.g.
的App-1 ===> app1.js

的App-2 ===> app2.js

的App-3 ===> app3.js

的App-4 === > app4.js

現在如果瀏覽器客戶端想要加載App-1，那麼只有app1.js將捆綁併發送到客戶端。 這將通過不加載不需要的js模塊來提高應用性能。

有什麼辦法可以使用webpack實現同樣的效果嗎？

在此先感謝。

來源

2016-08-18 tom

只有模塊，可延遲加載（按需）角度。因此，你必須捆綁更多的組件，這些組件應該在模塊中按需加載（延遲加載）。

看到這裏採集模塊：

import { NgModule, Component} from '@angular/core'; 
import { CommonModule } from '@angular/common'; 
import { Routes, RouterModule } from '@angular/router'; 

import { Ng2BootstrapModule } from 'ng2-bootstrap/ng2-bootstrap'; 

import { POIListeComponent }  from './poiliste'; 


const routes: Routes = [ 
    { path: '', component: POIListeComponent } 
] 


@NgModule({ 
    imports: [CommonModule, Ng2BootstrapModule, RouterModule.forChild(routes)], 
    declarations: [POIListeComponent] 
}) 

export class myPOIListeModule { }

，使其延遲加載您自動必須提供路由定義是這樣的：

export const AppRoutes: Routes = [ 
     { 
     path:  'poiliste', 
     loadChildren:() => System.import('./modules/poiliste/poiliste.module').then(m => m.POIListeModule) 
    } 
];

這一切，至少在使用的WebPack 。當運行你的項目（build）時，你可以看到webpack爲每個延遲加載的模塊生成的「塊」。

來源

2017-01-01 10:53:49 Karl

太棒了！謝謝..雖然我只有很長一段時間回來:) – tom

@Karl我在System.import行得到錯誤。系統符號不能解決。你能分享這個系統來自哪裏？ –

順便說一句，我正在使用TypeScript。是否有可能在plnkr上分享代碼？ –

您需要通過在每個AppModule的webpack配置中創建一個條目來將代碼拆分爲不同的包。然後，您可以在loadChildren路由到它們時動態加載。

下面是如何創建一個新的條目： How do I do code splitting with webpack on angular 2 app?

下面是如何動態加載模塊： https://angular-2-training-book.rangle.io/handout/modules/lazy-loading-module.html

希望這是你的意思

來源

2017-01-01 10:43:32

問題是關於Webpack2，並且您在鏈接2中給出的示例使用SystemJS。 –

動態加載模塊與webpack和angular2

回答

相關問題