Question

我正在使用angular-cli生成ng6 / 7应用程序（最新/最新版本中的所有相关库），在这里我通过ngx-build-plus（classis angular-cli devkit的扩展名）使用webpack配置，在其中我使用“外部”将库从最终捆绑包中排除（我想为我所有的单个微型应用程序共享所有平台库，例如angular，rxjs等）

因此-与该问题有关的限制：https://github.com/angular/angular-cli/issues/11490

这意味着如果我排除@ angular / core，它将停止生成惰性模块块。我可能可以手动替换所有“ loadChildern”字符串（如果需要），并用一些调用来替换它们以加载文件，但是...如何生成兼容的块/惰性模块以这种方式加载它？在webpack配置中指定新的“入口”点是不够的（它会生成不包含所有内容的包，例如html）我应该创建完全独立的webpack配置吗？那将与先前生成的捆绑软件兼容吗？我发现AngularCompilerPlugin在这里可能会有所帮助，但是我找不到任何可以告诉我成功生成它所需的全部示例。先前所有尝试均失败。

这里是获得一些见识的原型： https://github.com/TomKubik/angular-host-app

“ src”-加载库的主机应用程序（在这里并不重要）

“ projects / module-a /”是带有延迟加载模块的尝试的

感谢您的帮助。

Answer 1

我能够通过此webpack配置生成单独的捆绑包：

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 设置为“ umd ”，然后将“ 模块”选项（来自相关的tsconfig）。 ...否则它将生成或多或少的“空”文件，只是一些js包装器，但缺少真实内容。...

这是在单独的捆绑软件中实际生成某些内容的一种方法，仍然不确定是否正确...

如何生成自己的与Angular 6+ AoT兼容的惰性模块/块

1 个答案: