Как динамически загружать детей с разных серверов или CDN (во время выполнения) с помощью Angular?

Question

Как я могу загрузить ленивый модуль (loadchildren) на сервер A с сервера B?Я искал пару ссылок из Google, но не могу найти правильный ответ с примером.

Я нашел это Как я могу загрузить детей в мои маршруты, когда мой модуль включенкакой-то CDN , который мог бы быть похожим на мой вопрос, но я не понял его примера, и ответ кажется мне неполным.

Мои вопросы:

1. Нужно ли мне компилировать весь проект, включая ленивые модули?
2. Могу ли я скомпилировать только ленивый модуль и обращаться к основному модулю через loadchildren?
3. Как мне сделатьсвязки разделенного основного и ленивого проекта проекта?
4. Если я отделю основной проект и ленивый модуль, я должен также включить platformBrowserDynamic().bootstrapModule(FirstLazyModule ) в ленивый модуль?

Мое требование - сделать aсвязать ленивый модуль с помощью webpack / angular и разместить его на сервере B, в то время как основной модуль начальной загрузки находится на сервере A, где я могу дать ссылку для ленивого модуля на Routes свойства основного (начальной загрузки) модуля loadchildren во время выполнения.

Примечание : Я не хочу компилировать весь проект с отложенными модулями и частями хоста на другом сервере.

Пример

Маршрут приложения без знания ленивого модуля, но только CDN-ссылка.

// http links to load lazy modules from server B
const m1Link = 'http link of M1 which hosted on server B'
const m2Link = 'http link of M2 which hosted on server B'

const route:Routes = [
     { path:'M1', loadchildren: m1Link, canActive: m1Fn() },
     { path:'M2', loadchildren: m2Link, canActive: m2Fn() }
]

Ленивый модуль

const routes: Routes = [{
    path: '',
    component: DefaultComponent,
    children: [{ path: '', component: LazyChildComponent}]
}];

@NgModule({
    imports:      [ CommonModule, RouterModule.forChild(routes) ],
    exports:      [ RouterModule ],
    declarations: [ LazyChildComponent ]
})
export class FirstLazyModule { }

Answer 1

Способ, которым Angular направляет работу loadchildren, заключается в создании каждого лениво загруженных модулей как чанков и их лениво загружаемых при совпадении этого маршрута.

Если вы хотите, чтобы сгенерированный кусок был распределен по нескольким CDN или серверам? Тогда единственным вариантом будет сделать изменения в исходном коде Angular самостоятельно и создать собственную сборку.

Если вы хотите добавить блок углового модуля, сгенерированный из другого источника, который будет загружен, он не будет работать, произойдет сбой при внедрении зависимости. Это проблема безопасности, и фреймворк не позволит этого любой ценой.

Но вы можете загружать файлы javascript (не скомпилированный модуль Angular). Вы должны динамически создать тег сценария для него во время выполнения внутри модуля. Но вы не можете использовать угловые функции в скрипте.