标签: angular-builder

Angular CLI 6引入了一个新的构建器概念(又名Architect Targets).
有一对夫妇的预建的建设者随之而来@angular-devkit/build_angular,但遗憾的是没有文件说明如何创建自己的构建.

如何创建自己的构建器(例如,修改底层webpack配置)？

我正在做一个由后端+前端组成的7+项目。现在，我面临一个需求，我需要再创建一个包含前端+后端的项目。但是存在一些可重用的前端代码，可以在两个应用程序之间重用。

我的个人结构

需求

因此，当我阅读有关图书馆的概念时，我会发现

1）创建两个前端应用程序并共享一个公共库

因为我使用通过Visual Studio创建的（如图所示asp.net角模板项目，我不能采取这种方法在这里）。两个应用程序（项目一和项目二）具有自己的FE + BE。因此，我无法将两个FE应用程序分组到同一文件夹中，并使它们使用共享库。

2）创建库并上传到npm并用作依赖项

我不能采用这种方法，因为代码是专有的，不能在网络外部共享。此外，没有本地公司npm注册表可使用公司npm。

我知道可以使用库概念来完成。但是我不了解如何在多个应用程序中完成此操作。有人可以提供解决方案吗？谢谢 ！

我的项目用户 angular 版本 7，这里是 angular.json 配置

当我为生产构建时，我的 main.js 文件太大了将近 12MB，这使得我的应用程序加载页面非常缓慢。几乎初始加载需要 4 - 5 分钟

这是构建结果

这是我的分析仪结果

提前致谢

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

@import url('https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700');

但它已经可以与 Angular CLI 命令一起使用ng serve，但是，尝试构建命令ng build --prod --base-href部署了项目。然后注意到了这些问题。

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

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

我想知道如何在 angular 项目中应用 google 字体？

我最近更新了Angular 13我Angular 11需要的所有组件的最新版本，并且我正在努力让custom-webpack角度构建器在执行时运行ng serve。

在我的场景中，我通过自定义 Web 包插件 CSS Purge 执行 CSS 优化，因此让它正常工作对我来说至关重要，而且我确信这是可能的。然而，如果我ng build --configuration production这样做，它就像一个魅力，angular.json根本不会抱怨。

我执行时遇到的主要问题ng serve是出现以下错误：

Schema validation failed with the following errors:
  Data path "" must NOT have additional properties(customWebpackConfig).

当前angular.json文件具有以下设置：

    {
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "newwebsite-app": {
      "projectType": "application",
      "schematics": {
        "@schematics/angular:component": {
          "style": "scss"
        }
      },
      "root": "",
      "sourceRoot": "src",
      "prefix": "app",
      "architect": {
        "build": { …

我遇到问题，请帮助我解决此问题。问题是当我ng build在CLI中执行操作时，转到dist文件夹并运行index.html文件，以便控制台获取文件路径错误。

Failed to load resource: net::ERR_FILE_NOT_FOUND
polyfills.js:1 Failed to load resource: net::ERR_FILE_NOT_FOUND
styles.js:1 Failed to load resource: net::ERR_FILE_NOT_FOUND
scripts.js:1 Failed to load resource: net::ERR_FILE_NOT_FOUND
vendor.js:1 Failed to load resource: net::ERR_FILE_NOT_FOUND
main.js:1 Failed to load resource: net::ERR_FILE_NOT_FOUND
/D:/favicon.ico:1 Failed to load resource: net::ERR_FILE_NOT_FOUND

我们想将新的Angular 8 Ivy编译器与webpack一起使用。我们不使用Angular CLI。这可能吗？如何才能做到这一点？我似乎找不到有关此要求的信息。

例如，当使用webpack创建包时，其输出角度如下。

/* harmony import */ var _angular_core__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @angular/core */ "./node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js");

但是我想要输出是这样的：

/* harmony import */ var _angular_core__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @angular/core */ "@angular/core");

它在互联网上说您需要更改resolve.alias，但是据我了解，如果更改resolve.alias，这一次我找不到我使用的模块的路径。

我不是很受webpack的支配，但是我确定有解决此问题的方法。有没有可用的解决方案？

const path = require('path');

module.exports = {
    resolve: {
        alias: {
          //I'm stuck there
        }
    }
};

更新

在以下情况下，就会发生此问题，例如C模块使用X库。同时，此C模块在A模块的子模块A模块下打开。模块A和C在两个不同的项目上编译。我将X库捆绑在模块A中。我没有将X模块捆绑在C模块中。因为我知道在模块A中，该模块X是捆绑在一起的。然而，C模块显影剂得到X模块从基准“ d：\ X-库 ”的文件路径，而A模块开发商自“的X模块参考d：\库\ X库Webpath通过这些引用，从包中调用X模块。最后，当在A模块中打开C模块时，当它想使用X模块时，它会请求“ D：\ X-Library “作为_webpack_require（” D：\ X-Library “）。但是，模块X被模块A注册为_webpack_require …

根据 angular-cli 文档，BuilderContext.reportStatus()应该用于报告构建器活动的状态，但我什么也没看到（使用"@angular-devkit/architect": "^0.802.0"），而BuilderContext.logger.info()确实将状态输出到控制台，所以我对如何使用 reportStatus 功能完全感到困惑。

我将 Angular 项目从 Angular 10 更新到 11x。一切正常，除了一个关于运行项目使用的警告ng serve（在 ng serve 中没有任何选项）。警告是：

不推荐使用选项“sourceMap”：改用浏览器构建器中的“sourceMap”选项。

警告未出现在 中ng build。

以下是angular.json项目中浏览器构建器部分的样子：

"builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/my-app",
            "index": "src/index.html",
            "sourceMap": true,
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.app.json",
            "aot": true,
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],

Angular 11 中的某些相关内容发生了变化？如何消除此警告？