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"
  }
 ...

Leo · Accepted Answer · 2017-02-05 14:58:56Z

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 5, 2017 at 14:58

Leo

9301 gold badge13 silver badges30 bronze badges

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

3 Comments

ismaestro Over a year ago

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!

Jay Over a year ago

@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 Over a year ago

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

Ryan Wibawa · Accepted Answer · 2018-03-28 10:06:20Z

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

Collectives™ on Stack Overflow

Angular2 load script conditionally using Angular CLI?

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related