how to locally develop angular cli builder

Question

I have 2 folders on my machine, one Angular CLI project and one typescript project where I'm developing builders for the Angular CLI architects This is a mono repo and the builders are internal use only that I never plan on publishing. I have tried referencing the builders 4 diffrent ways:

relative:

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

install local module (file:):

/* 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 link (the "right" way)~~ (not an option see https://github.com/angular/angular-cli/issues/13055#issuecomment-442815952)

run npm link in the my-builders folder and then npm link my-builders in the angular cli project folder

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

npm pack:

run npm pack in the my-builders folder

/* 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"
        }
      }
    }
  }
}

All ways but npm pack produce this misleading error on ng build

Angular Compiler was detected but it was an instance of the wrong class. This likely means you have several @ngtools/webpack packages installed. You can check this with npm ls @ngtools/webpack, and then remove the extra copies.

output of npm ls @ngtools/webpack

`-- @angular-devkit/[email protected]
  `-- @ngtools/[email protected]

Needing to run npm pack for every little change is not reasonable, is there a better way to develop the builder locally? (prefer the builders to be in their own project for separation).

duplication repo https://github.com/gatimus/builder-development

Edit:

I also tried

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

and ng build --preserve-symlink, same results.

CSchulz · Accepted Answer · 2019-07-16 12:07:17Z

2

+50

If you never plan on publishing then you could put the builders in /my-cli-proj/my-builders and instead of "builder": "my-builders:my-browser", use "builder": "./my-builders:my-browser",. I think that should work. You still need to compile your builder somehow, like with tsc directly.

According to this comment the builder should be in the same project.

edited Jul 16, 2019 at 12:07

CSchulz

11.1k11 gold badges63 silver badges118 bronze badges

answered May 10, 2019 at 15:48

Wilhelmina Lohan

3,1233 gold badges33 silver badges67 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

how to locally develop angular cli builder

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related