Join the Stack Overflow Community
Stack Overflow is a community of 6.8 million programmers, just like you, helping each other.
Join them; it only takes a minute:
Sign up
up vote 3 down vote favorite
1

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"
  }
 ...
share|improve this question
up vote 1 down vote accepted

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

share|improve this answer
    
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 6 at 13:49
up vote 1 down vote

You can do it by using the following workaround.

Example for angular-cli 1.0.0-beta.25.5 installed locally(for globally see Where does npm install packages?):

1) Open your node_modules\angular-cli\models\webpack-build-common.js file and find the line (~39):

var globalScripts = webpack_build_utils_1.extraEntryParser(appConfig.scripts, appRoot, 'scripts')

2) Add filter to this expression. So it will look like:

var globalScripts = webpack_build_utils_1.extraEntryParser(appConfig.scripts, appRoot, 'scripts')
    .filter(function(script) {
        return !script.environment || script.environment === environment;
    });

3) Configure your angular-cli.json

"scripts": [
    "../node_modules/jquery/dist/jquery.js",
    "../node_modules/ion-rangeslider/js/ion.rangeSlider.js",
    "../node_modules/web-animations-js/web-animations.min.js",
    { "input": "script-only-for-dev.js", "environment": "dev" }
 ],

Enjoy!

share|improve this answer
    
Amazing! It works! But I have only one question, and what happend if I update angular-cli, I will lost this change? I suppose maybe this can happens. So, a more permanent way to do this, is making a pull request to the Angular CLI project? :) – Ismaestro Jan 29 at 13:18
    
I had an issue with the name of the variable (in my case was globalScrips) but thats all.. :) The version that I'm using is [email protected] – Ismaestro Jan 30 at 8:35

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.