如何将Angular Elements与“ng g library”方法相结合？

Question

如何将Angular Elements与“ng g library”方法相结合？

angularangular-cling-packagrangular-elements

22

如您所知，“ng g library”方法可以帮助我们创建可重用的组件库。但是，如果我想将这些组件编译为 Web Components，通过 Angular Elements 的支持呢？而且每个来自 lib 的组件都要编译到自己的文件夹或 JS 文件中。如何配置开发环境，以使我能够实现这一点？

例如：

如果我创建一个 Lib 并添加自定义组件，我知道我可以编译它，生成一系列文件夹，例如 esm5、esm2015、fesm5 等。现在问题是：我如何向我的 lib 中添加 30 个自定义组件，然后在编译时，它将为每个组件创建一个文件夹，其中包含它们的 Web Component 版本……就好像 Angular Elements 经过我的组件库并为它们中的每一个生成了 Web Component 版本。

像这样：

lib/
lib/custom/comp1
lib/custom/comp2
lib/custom/comp3
lib/custom/comp4

变成类似于下面的内容：

Dist/
Dist/custom/
Dist/custom/bundle
Dist/custom/esm5
Dist/custom/esm2015
Dist/custom/comp1_web_independend_component_version
Dist/custom/comp2_web_independend_component_version
Dist/custom/comp3_web_independend_component_version
Dist/custom/comp4_web_independend_component_version

我找到的最接近的解决方案是这个：

https://medium.com/@rahulsahay19/running-multiple-angular-elements-on-the-same-page-5949dac5523

我也请求了 Angular CLI 团队的帮助：

https://github.com/angular/angular-cli/issues/13999

- Fabio Nolasco

你有看过这个链接吗？https://medium.com/@IMM9O/web-components-with-angular-d0205c9db08f - Marshal

是的，实际上我有。事实上，你可以认为我在CLI和Elements方面都有经验。 - Fabio Nolasco

我发现你找到的这个解决方案相当有前途。结果如何呢？ - hackape

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- hackape · Accepted Answer

ng build内部使用webpack进行构建。因此，这个问题实际上可以分解为两个部分。

没有ng eject，如何进入内部webpackConfig并根据我们的需要进行自定义。
对于这种用例，期望的webpackConfig是什么样子。

对于第一部分，有一个@angular-builders/custom-webpack的解决方案。基本上它允许您将一些额外的字段合并到内部webpackConfig中，并仍然使用官方的"@angular-devkit/build-angular:browser"作为构建器。

现在对于第二部分，您的用例只是webpack中的多入口多输出构建问题。解决方案非常直接。

const partialWebpackConfig = {
  entry: {
    'custom/comp1': '/path/to/src/lib/custom/comp1.ts',
    'custom/comp2': '/path/to/src/lib/custom/comp2.ts',
  },
  output: {
    path: path.resolve(__dirname, 'Dist'),
    filename: '[name].js'
  }
}

以下是设置此配置的逐步说明。

npm install @angular-builders/custom-webpack
在您的项目根目录中创建一个webpack.config.js文件：

const path = require('path');
module.exports = {
  entry: {
    'custom/comp1': path.resolve(__dirname, 'src/lib/custom/comp1.ts'),
    'custom/comp2': path.resolve(__dirname, 'src/lib/custom/comp2.ts')
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].js'
  }
}

编辑 angular.json 文件中的 "architect.build" 字段:

{
  // ...
  "architect": {
    "build": {
      "builder": "@angular-builders/custom-webpack:browser",
      "options": {
        "customWebpackConfig": {
          "path": "./webpack.config.js",
        },
        // ...

运行 ng build，应该能看到结果。

对于高级用法，值得一提的是，@angular-builders/custom-webpack 支持导出 webpack 配置作为函数以获得对最终使用的 webpackConfig 的完全控制。