CODEWITHSUNDEEP
angularnpmangular-cli
Wilhelmina Lohan
Wilhelmina Lohan

Reputation: 3043

how to locally develop angular cli builder

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.

Upvotes: 2

Views: 1099

Answers (1)

Wilhelmina Lohan
Wilhelmina Lohan

Reputation: 3043

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.

Upvotes: 1

Related Questions