问题标签 [ngx-build-plus]

使用 ngx-build-plus 并在自定义插件中，我如何确定从 angular cli build 命令行请求的构建配置？

如果您想知道我将如何使用它，这里是用例：我试图在基于我选择的构建配置编译我的项目之前重命名 main.ts 文件 --> 正常构建与 Cordova 构建。Cordova 构建需要对 main.ts 进行不同的设置，并且包装platformBrowserDynamic().bootstrapModule(AppModule);在 if 语句中不适用于 web，所以我别无选择，只能使用 2 个不同的 main.ts 文件，我将根据构建类型切换。

我正在使用 ngx build plus 并尝试将 Kendo 模块外部化，例如 Kendo Angular Buttons。我遇到的问题是 Kendo UI 库没有 .umd 文件（它不是 Angular 库项目）。而且我已经成功地将具有 .umd 文件的项目外部化。所以我试图通过将它复制到 src/assets 目录来外部化时使用 kendo-angular-buttons 模块中可用的 main.js 文件，但是我的 angular main.js 文件无法找到 kendo-angular-纽扣。我的问题是 - 有没有办法在使用 ngx-build-plus 进行外部化时使用 .js 文件？

我已经使用 Angular 创建了微服务。我使用 ngx-build-plus:build 在单个 es2015 模块中构建它。所以，我有一个问题。如何@import '@angular/material/prebuilt-themes/deeppurple-amber.css'以某种方式导入 CSS 文件 ()，以便在所有 dom 元素之间共享该文件中的样式。

Fe，我的微服务中有 Dialog 组件，它取自 Angular 材料。如果我打开对话框，它会添加<div class="cdk-overlay-container"><div>为 BODY 元素的第一个子元素。所以，它比我的微服务应用程序更高。

所以，我只是想让从导入的文件中获取样式并将其应用到 .cdk-overlay-container 成为可能。我怎样才能做到这一点？

我试图在我的微服务主要组件的 SCSS 中导入这个 CSS 文件，我还试图为我的应用程序制作 shadow dom 等。没有任何帮助。

我正在尝试通过 ngx-build-plus 扩展 Angular CLI 构建。除了一件事，一切都很好。我需要将 url-loader 用于 png 和 svg 图像。我希望它将用图像代码替换css中的url。但它不起作用。我只是在我的包中获得了一组图像，并在 css 中获得了标准 url。

角度版本 8

这就是我使用配置的方式

这是生成的配置

PS Chunk 名称重命名成功，所以我可以假设 ConfigModifier 正在工作。

我的目标是开发一个 Angular Web 组件，我可以在我的“普通”父 SPA和一个 Wordpress 网站中使用它。

在 Wordpress 网站上使用 Web 组件时，我使用ngx-build-plus将所有内容打包在一个包中。. 这很好用。

但是，在为我的父 Angular 应用程序提供 Web 组件时，我想避免在包中包含 Angular 部分（因为它已经存在）。我遵循自述文件中描述的差异加载的博客/指南- 但我遇到了这个错误（root.component 是我的 Web 组件的名称）。

服务时出现上述错误：

如上所述，它可以正常工作（但它会创建大包 - 包含角度）。

非常欢迎任何帮助。我尝试从示例存储库中复制所有内容，但无济于事

我已经构建了 2 个带有角度元素的微型应用程序。使用 ngx-built-blus 和 --output-hashing 非 --single-bundle true 构建微应用程序。在 localhost 的 2 个不同端口上为他们提供服务。我目前面临以下问题。Shell 应用程序是一个常规的 Angular 应用程序

1. 除非我在 shell 应用程序中添加 polyfills.js 和 vendor.js 的脚本以及 main.js，否则它不会加载。Chrome给出了错误

2. 如果我确实添加了所有 polyfills.js、vendor.js 和 main.js，那么 shell 应用程序只会加载顶部的微型应用程序。shell app-root 和其他微应用未加载

这是因为构建过程有问题吗？ngx-build-plus 应该用 main.js 打包 vendor。如果是这样，为什么微应用在它的 main.js 中找不到它。微型应用程序是否需要一些设置才能从 main.js 中找到它的供应商和 polyfill

我有一个微应用元素和一个正常工作的外壳应用程序。但是，我正在尝试构建没有公共库的微应用程序并从全局范围内引用它们。我按照以下教程使用共享库构建角度元素

1. ng g ngx-build-plus:externals
2. npm run build:externals (ng serve --extra-webpack-config webpack.externals.js --output-hashing none --single-bundle)

3. 文件 webpack.externals.js 定义了以下外部

   /li>

4. 在 angular.json 中，有以下脚本

但是现在，该元素没有加载到 shell 应用程序中。它说“ Uncaught ReferenceError: ng is not defined at Object.@angular/core”。我对角度很陌生，我在这里错过了一步吗？看起来 angular.json 脚本不起作用，并且元素（微应用）无法引用全局数组

我正在尝试将async-css-plugin（https://www.npmjs.com/package/async-css-plugin）添加到 Angular 项目中。这个插件的作用是，它将 html 文件中的外部样式链接标记转换为：

我知道我们可以扩展 webpack 配置，为此我正在使用ngx-build-plus（https://github.com/manfredsteyer/ngx-build-plus）

我在下面的配置extend.webpack.config文件中添加了：

但是现在当我运行时npm run build -- --prod --extra-webpack-config extend.webpack.config.js，它不起作用。

它不会修改 index.html 文件。

如果我遗漏了什么，有人可以指导吗？

谢谢！

更新 这里是复制回购https://github.com/andreashuber69/async-css-angular-example

这是插件源代码https://github.com/andreashuber69/async-css-plugin/blob/37e9030fc4791370cd7efaf25a7275ff425c2d36/src/AsyncCssPlugin.ts

我使用ngx-build-plus包含一个特殊的 webpack 加载器，以将特殊的自定义文件集成到我们的 Angular-CLI 构建过程（Angular 10）中。

一切正常，但是我找不到以这种方式使用 e2e-tests 的方法，它甚至没有--extra-webpack-config选择...

如何修复 e2e 测试以使用webpack.partial.js?

我创建了一个角度元素并使用 ngx-build-plus 将其捆绑在一起。捆绑后，除了 main、vendor、polyfills 等之外，我的 dist 文件夹中有 100 多个块文件。

如何将它们全部合并到一个文件中。如何在另一个 JavaScript 应用程序中使用这些文件？