如何将“ Angular Elements”与“ ng g library”混合方法？ [英] How to mix Angular Elements with the "ng g library" approach?

问题描述

您知道， ng g库方法可以帮助我们创建可重用组件的库。但是，如果我希望通过Angular Elements的支持将那些组件编译为Web组件呢？不仅如此，库中的每个组件都将被编译到其自己的文件夹或JS文件中。

As you know, the "ng g library" approach helps us with the creation of libraries of reusable components. But what if I wanted those components to be compiled into web components... through the support of Angular Elements? Not only that but also that each component from the lib was to be compiled into its own folder or JS file. How to configure a dev environment that would allow me to achieve that?

例如：

如果我创建了一个环境，该如何实现？一个Lib并添加一个自定义组件，我知道我可以对其进行编译，生成一系列文件夹，例如esm5，esm2015，fesm5等。现在，问题是：如何向我添加30个自定义组件lib，然后在编译时，将为每个文件夹创建一个文件夹，其中包含它们的Web组件版本...仿佛Angular Elements遍历了我的组件库并生成了每个组件的Web组件版本。

If I create a Lib and add a custom component, I know that I can compile it, generating a series of folders, such as esm5, esm2015, fesm5, etc. Now, the question is: How can I add, let's say 30 custom components to my lib, and then when I compile, it will create a folder for each of them containing the Web Component version of them... as if Angular Elements went through my lib of components and generated the Web Components version of each of them.

就像这样：

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

变成类似于以下内容的东西：

Turning into something similar to:

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

最近的我发现的解决方案是这样的：

The closest solution I found is this:

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

我还请求Angular CLI团队提供帮助：

I also requested for Angular CLI team to help with that:

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

推荐答案

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

ng build internally use webpack to do the building. So this problem actually breaks down to two parts.

1. 如果没有 ng弹出，进入内部webpackConfig并根据我们的需要对其进行自定义。


2. 此用例所需的webpackConfig看起来像什么。

1. Without ng eject, how to tap into the internal webpackConfig and customize it to our need.
2. What does desired webpackConfig look like for this use case.

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

For part 1, there's a solution @angular-builders/custom-webpack out there. Basically it allow you to merge some extra field into the internal webpackConfig, and still use the offical "@angular-devkit/build-angular:browser" as builder.

现在对于第2部分，您的用例只是webpack中的多条目多输出构建问题。解决方案非常简单。

Now for part 2, your use case is simply a multi-entry-multi-output build problem in webpack. The solution is quite straight forward.

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'
  }
}

---

下面是设置的分步说明此配置。

---

Below is a step-by-step instruction to setup this config.

1. npm install @ angular-builders / custom-webpack


2. 在项目根目录中创建 webpack.config.js ：

1. npm install @angular-builders/custom-webpack
2. create a webpack.config.js in your project root:

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'
  }
}

1. 在 angular.json 中编辑 architect.build字段：

1. edit "architect.build" field in angular.json:

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

1. 运行 ng build ，应该会看到结果。

1. run ng build, should see the result.

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

For advance usage, it's worth mentioning that @angular-builders/custom-webpack support exporting webpack config as a function to gain full control of the final webpackConfig used.

这篇关于如何将“ Angular Elements”与“ ng g library”混合方法？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！