Angular2 load script conditionally using Angular CLI?

Question

Can I load scripts conditionally using Angular CLI???

In this file, I want to load one script depending on the enviroment or a variable. So In production I want to load a script while in develop not. Is there a way to do that? How?

angular-cli.json

...
"styles": [
    "../node_modules/bootstrap/dist/css/bootstrap.css",
    "../node_modules/font-awesome/css/font-awesome.min.css",
  ],
  "scripts": [
    "../node_modules/jquery/dist/jquery.js",
    "../node_modules/ion-rangeslider/js/ion.rangeSlider.js",
    "../node_modules/web-animations-js/web-animations.min.js",
    <---- LOAD HERE ONE SCRIPT DEPENDING ON ENVIRONMENT OR VARIABLE 
  ],
  "environments": {
    "source": "environments/environment.ts",
    "dev": "environments/environment.ts",
    "prod": "environments/environment.prod.ts"
  }
 ...

score 5 · Accepted Answer · answered Feb 05 '17 at 14:58

5

While @yuzuri suggested a very eleegnat solution - it requires you to edit a node module which is not a good idea..

Here is simple workaround:

You can edit your "scripts" section under package.json file to have that:

"start": "cp angular-cli-dev.json angular-cli.json && ng serve"

"build": "cp angular-cli-prod.json angular-cli.json && ng build"

Then you should rename your angular-cli.json file to angular-cli-dev.json and angular-cli-prod.json Each should have different configuration - in my case, different scripts in "scripts" section.

Hope that helps while we wait for an official solution

answered Feb 05 '17 at 14:58

Leo

900
1
11
26

I don't want to edit a node module so, until an official solution, this is simple and practice. Thank's to both of you! – ismaestro Feb 06 '17 at 13:49
@Leo, Is there any additional changes required apart from the one you mentioned above. I tried the above recommendation but doesn't seem to be working for me. – Jay Mar 30 '17 at 20:57
For anyone who is new to the NPM world, you can run the above scripts using the following commands a) npm run-script serve b) npm run-script build – Jay Mar 31 '17 at 17:18

score 0 · Answer 2 · answered Mar 28 '18 at 10:06

The .angular-cli.json supports configuration for multiple apps. Therefore we can put completely different configuration with different scripts/styles for the same app.

"apps": [
    {
      "styles": [
        "styles.css"
      ],
      "scripts": [ ],
      "environmentSource": "environments/environment.ts",
      "environments": {
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts",
        "local": "environments/environment.local.ts"
      }
    },
    {
      "styles": [
        "styles.css",
        "../node_modules/select2/dist/css/select2.min.css"
      ],
      "scripts": [
        "../node_modules/jquery/dist/jquery.min.js",
        "../node_modules/select2/dist/js/select2.full.min.js"
      ],
      "environmentSource": "environments/environment.ts",
      "environments": {
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts",
        "local": "environments/environment.local.ts"
      }
    }

To serve the default app: $ ng serve --app=0

or

$ ng serve --app 0

To serve the app with local environment:

$ ng serve --app=1 --env=local --port=8091

Angular2 load script conditionally using Angular CLI?

2 Answers2

Linked