如何将角度元素与"ng g library"方法混合？

Question

如您所知，"ng g 库"方法可以帮助我们创建可重用组件的库。但是，如果我希望将这些组件编译为 Web 组件怎么办......通过角度元素的支持？不仅如此，库中的每个组件都要编译到自己的文件夹或JS文件中。如何配置允许我实现这一目标的开发环境？

例如：

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

喜欢这个：

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

Answer 1

ng build内部使用 webpack 来构建。所以这个问题实际上分为两部分。

1. 没有ng eject，如何利用内部 webpackConfig 并根据我们的需要对其进行自定义。
2. 对于这个用例，所需的 webpackConfig 是什么样的。

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

现在对于第 2 部分，您的用例只是 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'
}
}

---

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

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

3. >编辑angular.json中的"architect.build"字段：

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

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

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