Модули с динамической нагрузкой с webpack и angular2

Question

У меня есть структура приложения angular2 с 4 суб-приложениями, для которых требуются некоторые общие конфигурации. Эти суб-приложения не зависят друг от друга. Я использую webpack для динамической загрузки и разбиения кода. Каждый суб-приложение будет иметь свои собственные файлы js, как только они будут преобразованы из .ts-файлов. Я хочу связать файлы js, соответствующие загрузке суб-приложений клиентом браузера.

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

App-2 ===> app2.js

App-3 ===> app3.js

App-4 === > app4.js

Если клиент браузера хочет загрузить приложение-1, то только приложение app1.js будет отправлено и отправлено клиенту. Это улучшит производительность приложения, не загружая ненужные js-модули.

Есть ли способ получить то же самое с помощью webpack?

Заранее спасибо.

Answer 1

только модули могут быть ленивыми загруженными (по требованию) угловыми. Поэтому вам нужно собрать на руду больше компонентов, которые должны быть загружены по требованию (лениво загружены) в модуль.

Смотрите здесь модуль выборки:

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 , При запуске проекта (сборка) вы можете увидеть тогда «куски», создаваемые webpack для каждого из ленивых загружаемых модулей.

Answer 2

Вам необходимо разделить свой код на разные пакеты, создав запись в конфигурации webpack для каждого AppModule. Затем вы можете загрузить динамически при маршрутизации на них с помощью 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

Надеется, что это было то, что вы имели в виду