Feature Request: load scripts in angular-cli.json conditionally?

[Ismaestro]

As I mention in this stackoverflow question, I think It would be awesome if we could load scripts depending on the environment.

So In production I want to load a script while in develop not.

The syntax's in angular-cli.json could be:
{ "input": "script-only-for-dev.js", "environment": "dev" }

BR

[arliber]

I'm now loading a "sandbox" script using the "scripts" section in angular-cli.json.
This "sandbox" script must be removed from the production build, any suggestion how to do so in the meantime?

[galta]

Following...
having the same problem... :-(

[arliber]

Suggested 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

[hansl]

What's wrong with having import 'my-prod-only-script' inside your environment.prod.ts?

[Ismaestro]

@hansl It's not an import. It's a script that should be in included and minified with the others scripts of the application. So I think the right place to do that is in the .angular-cli.json file.

[LanderBeeuwsaert]

A practical use case about this:

If I want to add my google analytics tracker code only when I go to production, how do I go about to do this?
I've tried to add it to environment.prod.ts ,
I've even tried https://github.com/angulartics/angulartics2 only to try to solve this.
Up until now, I have not succeeded to find a satisfying solution. Any ideas?

[fcalderon]

@LanderBeeuwsaert I have a very similar use case as yours. I may have found a workaround that might make things more maintainable and be a better design than having to separate scripts.

So the way I would do it with the service:

• Edit environment.prod.ts and add a variable, e.g. enableAnalytics, you could also simply use the existing enableProduction
• Go to your analytics service, and check whether this flag is true in order to send the analytic event.

e.g:

    public pageChange(pageName) {
        if (!!ga && !!environment.enableProduction) {
                ga('send', 'pageView', pageName);
        }
    }

If you have more than one analytics script, you can use the code of the script and store that in the environment. Then you could load ga with the appropriate code in the service constructor.

e.g.

// ... other imports ...
import {environment} from "../../environments/environment";

// ... other code ...

    constructor(logger:Logger){
        ga('create', environment.analyticsCode, 'auto');
    }

// ... other code ...

[LanderBeeuwsaert]

Hello @fcalderon ,

yes, I actually solved it approximately the same way you did.
In my app.component.ts file I wrote:

if (environment.production) {
  ga("create", gaCode, "auto");
  ga("send", "pageview", "index.html");
}

kind regards

[rupeshtiwari]

I created duplicate commands with prod suffix in the script and used those commands when needed.
like "test": " ng test", I created "test-prod": "ng test --browsers PhantomJS" , "build-prod" : "ng build -prodng build --prod --output-hashing false" and so on. Now in my Continuous integration I use test-prod and build-prod scripts.

[garysui]

@LeonLiber I like your solution. The nature of the problem is more build related.

[ohcibi]

Why does this have a "nice to have" priority? This is a must have feature for a build tool.

[ohcibi]

I'd like to share another solution that leaves only little boilerplate code in main.ts using dynamic import which I borrowed from here (simplyfied code for umd module):

main.ts

//...
import { environment } from './environments/environment';

declare global {
  interface System {
    import (request: string): Promise<any>;
  }

  const System: System;
}

if (!environment.production) {
  System.import('library').then(library => ).catch(error => );
}
//...

which only leaves something like

if (!__WEBPACK_IMPORTED_MODULE_3__environments_environment__["a" /* environment */].production) {
  __webpack_require__.e/* import() */(6).then(__webpack_require__.bind(null, "library")).then(function (library) {
    }).catch(function (e) {
    });
}

in the production build.

[val-samonte]

any updates on this? my use case is, I want to be able to include external scripts from the CDN, (which will be easily done by adding this on the script section) but of course, I want to specifically include the dev script when in dev environment.

[richh94]

Same question for me, are there any updates on this?

For now I fixed it this way #4451 (comment) (thanks!) but that is REALLY ugly if you want to do that for Google Analytics, Hotjar AND Application Insights in 3 different environments.

[alan-agius4]

Kinda need this badly as well.

[Ismaestro]

Check this.

[MadMango]

For anyone still looking for a solution, in your main.ts, you could do:

import { environment } from './environments/environment';

const src = environment.your.cdn.url;
document.write(`<script src=${src}></script>`);

It's just a workaround but gets the job done for me.

[rwibawa]

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

[clydin]

Closing as Angular CLI 6.0+ supports a far richer configuration file format that allows for the customizations described above.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}