如何在本地开发 Angular cli builder答案

【问题标题】：how to locally develop angular cli builder如何在本地开发 Angular cli builder
【发布时间】：2019-04-24 09:14:24
【问题描述】：

我的机器上有 2 个文件夹，一个 Angular CLI 项目和一个 typescript 项目，我正在为 Angular CLI 架构师开发构建器这是一个单一的存储库，构建器仅供内部使用，我从未计划发布。我尝试以 4 种不同的方式引用构建器：

亲戚：

/* angular.json */
{
  "projects": {
    "my-cli-proj": {
      "architect": {
        "build": {
          "builder": "relative/path/to/my-builders:my-browser"
        }
      }
    }
  }
}

安装本地模块（文件：）：

/* package.json */
{
  "devDependencies": {
    "my-builders": "file:relative/path/to/my-builders"
  }
}

/* angular.json */
{
  "projects": {
    "my-cli-proj": {
      "architect": {
        "build": {
          "builder": "my-builders:my-browser"
        }
      }
    }
  }
}

~~npm 链接（“正确”方式）~~（不是选项，请参阅https://github.com/angular/angular-cli/issues/13055#issuecomment-442815952）

在 my-builders 文件夹中运行 npm link，然后在 angular cli 项目文件夹中运行 npm link my-builders

/* angular.json */
{
  "projects": {
    "my-cli-proj": {
      "architect": {
        "build": {
          "builder": "my-builders:my-browser"
        }
      }
    }
  }
}

npm 包：

在 my-builders 文件夹中运行 npm pack

/* package.json */
{
  "devDependencies": {
    "my-builders": "file:relative/path/to/my-builders-version.tgz"
  }
}

/* angular.json */
{
  "projects": {
    "my-cli-proj": {
      "architect": {
        "build": {
          "builder": "my-builders:my-browser"
        }
      }
    }
  }
}

除了 npm pack 之外的所有方法都会在 ng build 上产生这个误导性错误

检测到 Angular 编译器，但它是错误类的实例。这可能意味着您安装了多个 @ngtools/webpack 包。您可以通过npm ls @ngtools/webpack 进行检查，然后删除多余的副本。

npm ls @ngtools/webpack的输出

`-- @angular-devkit/build-angular@0.8.3
  `-- @ngtools/webpack@6.2.3

对于每一个小改动都需要运行npm pack 是不合理的，有没有更好的方法在本地开发构建器？（希望建设者在自己的项目中进行分离）。

复制回购https://github.com/gatimus/builder-development

编辑：

我也试过了

/* angular.json */
{
  "projects": {
    "my-cli-proj": {
      "architect": {
        "build": {
          "builder": "my-builders:my-browser",
          "options": {
            "preserveSymlinks": true
          }
        }
      }
    }
  }
}

和ng build --preserve-symlink，结果相同。

【问题讨论】：

标签： angular npm angular-cli

【解决方案1】：

如果您从不打算发布，则可以将构建器放在 /my-cli-proj/my-builders 中，而不是 "builder": "my-builders:my-browser"，使用 "builder": "./my-builders:my-browser"。我认为这应该有效。您仍然需要以某种方式编译您的构建器，例如直接使用 tsc。

根据这个comment，构建器应该在同一个项目中。

【讨论】：