问题标签 [angular-builder]

Angular CLI 6 引入了构建器（又名 Architect Targets）的新概念。
有几个预构建的构建器@angular-devkit/build_angular，但遗憾的是没有文档说明如何创建自己的构建器。

如何创建自己的构建器（例如修改底层 webpack 配置）？

styles.scss我在Angular 项目的文件中添加了 Google 字体链接。

但它已经适用于 Angular CLI 命令ng serve，但是，尝试构建命令ng build --prod --base-href部署了项目。然后注意到了问题。

问题是它“不适用于导入谷歌字体”。

我正在谷歌上研究这个问题。但我没有找到一个好的解决方案。

我想知道如何在 Angular 项目中应用谷歌字体？

我正在使用 angular/cli 6.1.3 并在尝试使用 enableIvy: true in 进行编译时出现以下错误tsconfig.app.json：

构建命令：

angular/cli 的版本详情

在 Angular 7 应用程序中，我有不同的资产、图像、字体等。所有这些都位于 src/assets/images 或 src/assets/fonts 等

我的文件是这样使用的：<img src="/assets/images/img.png">

angular.json 看起来像这样：

构建时我使用：

ng build --prod --build-optimizer --deploy-url=https://cdn.domain.com

这将替换所有对 assets 资源的引用：

<img src="/assets/images/img.png">

对此：

<img src="https://cdn.domain.com/assets/images/img.png">

我的问题是如何assets/images在构建时删除路径，以便构建输出后：

<img src="https://cdn.domain.com/img.png">

我面临一个问题，请帮我解决这个问题。问题是，当我ng build在 CLI 中执行并转到 dist 文件夹并运行 index.html 文件时，控制台会收到文件路径的错误。

我正在使用 angular 5，我的项目结构如下

main-module 是基本模块，它拥有最多的组件，高级模块将有额外的组件。我必须开发两个版本的应用程序。一基础一高级

基本->只有主模块

高级-> 主模块 + 高级模块

在基本版本中，构建应用程序时不应捆绑高级模块文件。有没有办法根据某些配置动态导入/排除模块。请帮忙。

在为生产构建我的 Angular 项目时，ng buid --prod我收到以下错误：

10% 构建模块 3/4 个模块 1 个活动模块 .../client/src/styles.sass/media/client/node_modules/clean-css/lib/optimizer/level-1/optimize.js:429 context.warnings.push ('无效的值标记在' + formatPosition(value[0][1][2][0]) + '。忽略。');

早些时候，这一天一切正常。但现在这个。

这似乎是由某些 css 优化器引起的，clean-css但我不知道如何修复它。（我尝试更新并重新安装角度）

我想为 Angular 7 创建 webpack 配置。我遵循了以下教程 - http://opensourceforgeeks.blogspot.com/2018/12/how-to-customize-build-configuration.html。我正在使用 - @angular-builders 包我还检查了我的 index.html，它包含基本 href

我在 angular.json 中更改了以下内容 -

背景

@angular-builders/custom-webpack允许我们自定义 Angular 构建的 webpack 配置，这里有教程。我正在使用它来构建 Web 扩展（Chrome/Firefox）的附加脚本。

这是extra.webpack.config.js我包含在angular.json

正如预期的那样，它输出background-script.js，fill-manager.js并site-bridge.js与角度构建工件一起输出。由于这个 webpack 配置与 angular 的 webpack 配置合并，我们可以从一个angular.json文件中控制所有优化、散列、源映射等。

问题

我还想捆绑附加的 css 文件，这些文件将与扩展脚本一起使用并由 angular build 控制。

我也许可以添加特定的规则、加载器等，extra.webpack.config.js但我不想处理 postcss、autoprefixer 和 sass 加载器等，因为它已经在 angular 内部完成了。

就像脚本文件一样，只是在里面添加 css 条目extra.webpack.config.js不会产生 css 文件，即

有没有一种方法可以让我指定一个 css/scss 文件条目extra.webpack.config.js，它只是使用基于角度的配置输出一个捆绑的 css 文件？

我正在尝试使用@angular-builders/custom-builders在正常构建过程中设置 Web 字体构建。我使用的包是webfonts-loader。我让它有点工作，但任何与文件路径相关的加载器选项都不起作用。我认为这是由于 Angular 配置而不是加载程序包，但我不确定如何正确设置它。

代码如下，但有两个主要问题。首先，main.css无论我尝试什么，都会输出 CSS 文件，其次是 CSS 文件引用字体位置/fontname.hash.ext（填写了正确的信息）。导致/找不到文件。

如何调整配置以使其他路径选项正常工作？

我添加了相关位angular.json，正在调用自定义 Webpack 配置：

该my-icon.font.js文件如下。其中一些选项得到了尊重，但与路径相关的任何内容都被忽略了。

我在.font.js里面引用那个文件main.ts是这样的：