Angular 如何将角度元素与;ng g图书馆“;方法
正如您所知,“ngg库”方法帮助我们创建可重用组件库。但是如果我想把这些组件编译成web组件呢。。。通过角元素的支持?不仅如此,库中的每个组件都要编译到自己的文件夹或JS文件中。如何配置允许我实现这一目标的开发环境 例如: 如果我创建一个库并添加一个自定义组件,我知道我可以编译它,生成一系列文件夹,如esm5、esm2015、fesm5等。现在的问题是:我如何向库中添加,比如说30个自定义组件,然后在编译时,它将为每个组件创建一个文件夹,其中包含它们的Web组件版本。。。好像Angular元素通过我的组件库生成了每个组件的Web组件版本 像这样:Angular 如何将角度元素与;ng g图书馆“;方法,angular,angular-cli,ng-packagr,angular-elements,Angular,Angular Cli,Ng Packagr,Angular Elements,正如您所知,“ngg库”方法帮助我们创建可重用组件库。但是如果我想把这些组件编译成web组件呢。。。通过角元素的支持?不仅如此,库中的每个组件都要编译到自己的文件夹或JS文件中。如何配置允许我实现这一目标的开发环境 例如: 如果我创建一个库并添加一个自定义组件,我知道我可以编译它,生成一系列文件夹,如esm5、esm2015、fesm5等。现在的问题是:我如何向库中添加,比如说30个自定义组件,然后在编译时,它将为每个组件创建一个文件夹,其中包含它们的Web组件版本。。。好像Angular元素通
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
我找到的最接近的解决方案是:
我还请求Angular CLI团队提供以下帮助:
ng构建
内部使用webpack进行构建。所以这个问题实际上分为两部分
ng eject
,如何点击内部webpackConfig并根据需要定制它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安装@angular builders/自定义网页
webpack.config.js
:angular.json
中的“architect.build”字段:ng build
,应该可以看到结果对于高级使用,值得一提的是,
@angular builders/custom webpack
支持导出以获得对最终使用的webpackConfig的完全控制。您查看过此链接吗?是的,实际上我有。事实上,我想你可以认为我在CLI和元素方面都有经验。我发现你很有前途。结果怎么样?嗨,哈卡普,谢谢你的回答!我创建了一个新项目,并遵循了您的步骤。然而,最终的结果不是“web组件”。事实上,你的答案中的角度元素部分并不清楚。换句话说,编译后的组件不能作为独立组件在没有Angular的网站上使用。这是回购协议,如果你想尝试一下的话:我对angular不是很有经验,但我有处理网页问题的经验。你能指出编译结果的确切错误吗?编译结果不是Web组件(W3C)。Web组件不需要运行。我们可以说编译后的结果仍然是角度组件。从您的示例repo中编译有效web组件的命令是什么?如果我理解正确,“web组件”和“角度组件”编译结果是从相同的源代码构建的,因此,我假设当前配置中遗漏了一些webpack进程。我希望看到它们并排出现,以确定它们之间的区别。现在让我们暂且不谈输入/输出问题,您能否先指导我使用正确的配置/命令来生成正确的Web组件结果?
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'
}
}
{
// ...
"architect": {
"build": {
"builder": "@angular-builders/custom-webpack:browser",
"options": {
"customWebpackConfig": {
"path": "./webpack.config.js",
},
// ...