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