CODEWITHSUNDEEP
angulartypescriptangular-cli
mautrok
mautrok

Reputation: 961

Set different angular-cli json or pass variables

I have an application that can be used for different costumers, so i need to personalize it in different ways, depends on the costumer.
What i basically need to do is to launch ng build not always with the same settings in angular-cli.json file, is there a way to:

1) Change angular-cli.json file when i launch the build?
2) Pass a variable to change the 'styles' and the 'dist' fields?

Right now i am forced to remember, every time that i make a modify to my app, to change the file for every costumer and make a build, i would like to write a script that make all the builds in cascade, but is impossible if i can't personalize angular-cli.json depending on the build.

UPDATE

I have found this link but how to use it? I have searched in the documentation here but i don't understand, did i have to add a voice under app array in anguylar-cli.json? Or i have to make another array similar to the app one?

UPDATE 2

this is what i have under apps:

{
  "name":"app1",
  "root": "src",
  "outDir": "dist",
  "assets": [
    "fonts",
    "images",
    "assets",
    "favicon.ico"
  ],
  "index": "index.html",
  "main": "main.ts",
  "test": "test.ts",
  "tsconfig": "tsconfig.json",
  "prefix": "app",
  "mobile": false,
  "styles": [
    "paper.css",
    "styles.css",
    "style_app1.css"
  ],
  "scripts": ["../node_modules/chart.js/dist/Chart.bundle.min.js"],
  "environments": {
    "source": "environments/environment.ts",
    "dev": "environments/environment.ts",
    "prod": "environments/environment.prod.ts"
  }
},
{
  "name":"app2",
  "root": "src",
  "outDir": "dist2",
  "assets": [
    "fonts",
    "images",
    "assets",
    "favicon.ico"
  ],
  "index": "index.html",
  "main": "main.ts",
  "test": "test.ts",
  "tsconfig": "tsconfig.json",
  "prefix": "app",
  "mobile": false,
  "styles": [
    "paper.css",
    "styles.css",
    "style_app2.css"
  ],
  "scripts": ["../node_modules/chart.js/dist/Chart.bundle.min.js"],
  "environments": {
    "source": "environments/environment.ts",
    "dev": "environments/environment.ts",
    "prod": "environments/environment.prod.ts"
  }
}

to say that it does not work it's because in dist2 i didn't find anything whent i launch ng build --app app2

Upvotes: 1

Views: 1637

Answers (1)

Yakov Fain
Yakov Fain

Reputation: 12376

The file .angular-cli.json has a property apps, which is an array that can have more than one app. By default, ng generates just one entry there, for example:

{
  "root": "src",
  "outDir": "dist",
  "assets": [
    "assets",
    "favicon.ico"
  ],
  "index": "index.html",
  "main": "main1.ts",
  "polyfills": "polyfills.ts",
  "test": "test.ts",
  "tsconfig": "tsconfig.app.json",
  "testTsconfig": "tsconfig.spec.json",
  "prefix": "app",
  "styles": [
    "styles.css"],
  "scripts": [],
  "environmentSource": "environments/environment.ts",
  "environments": {
    "dev": "environments/environment.ts",
    "prod": "environments/environment.prod.ts"
  }
},

The above apps section defines an app the main1.ts containing your bootstrap code. If you have another app in the same project where the bootstrap code is in main2.ts, you need to repeat the above configuration, but with "main"="main2.ts". Now you have an array of two apps and you can build either one by using a corresponding array index, e.g. 

ng build --app 0

or

ng build --app 1

You can also add a property "name" to the app configuration, e.g. 

"apps": [
    { "name":"app1",
      "root": "src",
      "outDir": "dist",
       ...

and run the build as follows:

ng build --app app1

Upvotes: 3

Related Questions