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

问题描述

如您所知，ng g 库"方法可帮助我们创建可重用组件库.但是如果我希望通过 Angular Elements 的支持将这些组件编译成 Web 组件呢?不仅如此，lib 中的每个组件都将被编译到自己的文件夹或 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 个自定义组件，然后当我编译时，它会为每个组件创建一个文件夹，其中包含它们的 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

变成类似于:

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 build 内部使用 webpack 进行构建.所以这个问题实际上分为两部分.

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

1. 在没有 ng eject 的情况下，如何利用内部 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:

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 库"混合使用方法?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！