8
votes

I am trying to figure out how to build and deploy an Angular 2 project built with angular cli based off of variables in my environment typescript files.

For example, my angular-cli.json file has a dev environment declared that points to "environments/environment.dev.ts". This file has the following properties:

export const environment = {
  production: false,
  'output-path': '\\\\testServer\\apps\\appName\\'
};

What I would like to do is be able to call ng build --dev, and the cli would build the app with the dev file (which it does correctly), but also output it to the output-path, which in this case would be a network share. Is there anyway to do this without incorporating some other CI tool and/or gulp?

I have manually added the -o (--output-path) option when building and passed the path, but I don't want to build a solution for the company that would require developers to manually type paths each time.

I am aware I could update the package.json to add new commands for build/deploy with the --output-path parameter, but that would require updating the paths in multiple files and adding lots of new commands (ones for local, dev, test, prod).

Does anyone have a good solution for this?

2
If you are on .NET project, couldn't you just use the Project Publish feature and add the right command in it?LoïcR
This isn't a .NET project, it's an angular project built in VS Code (some other developers use WebStorm)Geo

2 Answers

16
votes

Update for Angular 6+:

Set it in the angular.json:

For the development env:

  "architect": {
    "build": {
      "builder": "@angular-devkit/build-angular:browser",
      "options": {
        "outputPath": "dist/dev",

For the production env:

      "configurations": {
        "production": {
          "outputPath": "dist/prod",
7
votes

There are flags for the ng build command to handle what you need...

--target=development (or -dev)
--target=production (or -prod)
&
--output-path=my/output/path

So you can create npm scripts to do them in conjuction:

//in package.json
"scripts": {
  "devbuild": "ng build -dev --output-path=my/dev/output",
  "prodbuild": "ng build -prod --output-path=my/prod/output"
}

then you can just run....

npm run devbuild
npm run prodbuild