Как создать собственный ленивый модуль / чанк, совместимый с Angular 6+ AoT
Я использую angular-cli для создания приложения ng6 / 7 (все связанные библиотеки в последних / последних версиях), где я использую конфигурацию webpack через ngx-build-plus (расширение для classis angular-cli devkit), где я использую «внешние» для исключить библиотеки из окончательного пакета (я хочу поделиться всеми библиотеками платформ, такими как angular, rxjs и т. д., для всех моих отдельных микроприложений)
Как следствие - есть ограничение, связанное с этой проблемой: https://github.com/angular/angular-cli/issues/11490
Это означает, что если я исключу @ angular / core, он перестанет генерировать ленивые блоки модуля. Я, вероятно, могу вручную заменить все вхождения строки loadChildern (при необходимости) и заменить их каким-либо вызовом для загрузки файла, но ... как я могу сгенерировать совместимый модуль chunk / lazy, чтобы иметь возможность загружать его таким образом? Недостаточно указать новую точку входа в конфигурации веб-пакета (он генерирует пакет, который не включает в себя все, например html). Следует ли мне создавать полностью отдельную конфигурацию веб-пакета? Будет ли это совместимо с ранее созданным пакетом? Я нашел AngularCompilerPlugin, который может быть здесь полезен, но я не могу найти никаких примеров, которые рассказали бы мне, что все необходимо для его успешного создания. Все предыдущие попытки не увенчались успехом.
Вот прототип, чтобы получить представление: https://github.com/TomKubik/angular-host-app
"src" - хост-приложение, которое загружает библиотеки (здесь не так важно)
"projects / module-a /" - это модуль с ленивыми попытками загрузки модуля
Спасибо за любую помощь здесь.
Ответы 1
Я смог сгенерировать отдельный пакет с помощью этой конфигурации веб-пакета:
const AngularCompilerPlugin = require('@ngtools/webpack').AngularCompilerPlugin;
const path = require('path');
module.exports = { /* ... */
externals: {
"zone.js": "Zone",
"rxjs": "rxjs",
"@angular/core": "ng.core",
"@angular/common": "ng.common",
"@angular/platform-browser": "ng.platformBrowser",
"@angular/elements": "ng.elements"
},
entry: {
lazy: './src/app/page2/page2.module.ts',
},
resolve: {
mainFields: ['browser', 'module', 'main']
},
module: {
rules: [
{ test: /\.ts$/, loaders: ['@ngtools/webpack'] },
{ test: /\.html$/, loader: 'html-loader', options: { minimize: true } },
{
test: /\.js$/,
loader: '@angular-devkit/build-optimizer/webpack-loader',
options: {
sourceMap: false
}
}
]
},
plugins: [
new AngularCompilerPlugin({
skipCodeGeneration: true,
tsConfigPath: './tsconfig.lazymodules.json',
entryModule: path.resolve(__dirname, './src/app/page2/page2.module#Page2Module')
})
],
mode: "production",
output: {
path: __dirname + '/dist/lazy',
libraryTarget: "umd"
},
}
самой важной частью было установить skipCodeGeneration: true, а затем параметр «модуль» (из соответствующего tsconfig) на «умд» .... иначе он генерирует более или менее «пустой» файл, только некоторые js-оболочки, но реальное содержимое отсутствует ... .
Это один из способов создать действительно некоторый контент в отдельном пакете, но все еще не уверен, правильный ли он ...