load different scripts in index.html based on dev / prod environment in mvc

Question

I'm trying to load different javascript files based on which environment I'm using. I have created an Angular2 application, which lives inside a MVC app.

In my index.html (_layout.cshtml), I have the following scripts:

<script src="~/public/lib/js/vendors.min.js"></script> <!--bundled dependencies-->
@*<script src="~/public/dist/js/app.min.js"></script> <!--bundled source-->*@

<script src="~/system.dev.config.js"></script>    
<script>
    System.import('../public/dist/AppComponent/main.js').catch(function (err) { console.error(err); });
</script>

This code will load angular2 dependencies and start the application. I want to distinguish between development (when I'm developing on the application) and when it's online in production.

I want to distinguish, so I only load the following files:

Dev environment:

<script src="~/public/lib/js/vendors.min.js"></script> <!--bundled dependencies-->

<script src="~/system.dev.config.js"></script>    
<script>
    System.import('../public/dist/AppComponent/main.js').catch(function (err) { console.error(err); });
</script>

Prod environment:

<script src="~/public/lib/js/vendors.min.js"></script> <!--bundled dependencies-->
<script src="~/public/dist/js/app.min.js"></script> <!--bundled source-->

Is there any option, so when I am in debug mode it should use the dev scripts and the other way around when in release mode?

Thanks in advance.

How do you run it without any loader?

Roman C
– Roman C

2016-11-27 19:28:11 +00:00
Commented Nov 27, 2016 at 19:28 — Roman C
– Roman C, Commented Nov 27, 2016 at 19:28

Messias Freitas · Accepted Answer · 2016-11-27 19:30:37Z

1

You can use

@{ 
    #if DEBUG
        <script src="~/public/lib/js/vendors.min.js"></script> <!--bundled dependencies-->

        <script src="~/system.dev.config.js"></script>    
        <script>
            System.import('../public/dist/AppComponent/main.js').catch(function (err) { console.error(err); });
        </script>
    #else
        <script src="~/public/lib/js/vendors.min.js"></script> <!--bundled dependencies-->
        <script src="~/public/dist/js/app.min.js"></script> <!--bundled source-->
    #endif
}

I hope I have helped

answered Nov 27, 2016 at 19:30

Messias Freitas

613 bronze badges

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

Collectives™ on Stack Overflow

load different scripts in index.html based on dev / prod environment in mvc

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related