How to Conditionally Include Script Element in Angular

How to conditionally include script element in Angular

Inline Javascript will always have priority over Angular (parsed first by the browser). The best way is to inject/execute the javascript inside your controller with a condition or creating a directive.

Conditionally include JS script in html

The Jekyll documentation says you can use the Jekyll environment to conditionally include code when building the site. For your case:

...
{% if jekyll.environment == "production" %}
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
{% else %}
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.js"></script>
{% endif %}
...

Another option suggests using another config file specifically for development.

_config.yml sets environment: prod.

_config_dev.yml sets environment: dev.

Running jekyll build --config _config.yml,_config_dev.yml in development, the second config file overrides the first and sets the environment to dev. GitHub Pages runs jekyll build - which only uses _config.yml - and would have environment set to prod. You could use a similar syntax to the above to conditionally include the file.

...
{% if site.environment == "prod" %}
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
{% else %}
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.js"></script>
{% endif %}
...

add / remove script conditionally from index.html in angular 2/4

sure, you can certainly do that. this is one way, but you could really just include it in the component you want to run it in, then lazy load the route to it, so that the script won't load until that route is visited

 import { ActivatedRouteSnapshot } from '@angular/routing';

    constructor(route: ActivatedRoute){}

    ngOnInit() {
        const script = document.createElement('script');
        script.src ='../../assets/js/myScript.js';
        if (this.route === 'root/with/script') {
            document.body.appendChilde(script);
        }
    }

How to conditionally include assets in the <head> with Angular

So you should include the library script in page.

Then within directive bound to elements it needs to act on do the initialization.

app.directive('unity', function () {
    return {
        link: function (scope, element, attrs) {
            // element is jQuery object when jQuery.js is included in page 
            // before angular - or it is a jQLite object similar to a jQuery object

            // config code

            u.initPlugin(element[0], "web_ovar_beta.unity3d");
        }
    }
});

Usage in view:

<div unity></div>

This can easily be expanded to pass in attributes to the directive from controller

Dynamically add scripts to my app depending on conditional

My answer:

I have kept index.html the same so that it calls config.js and redirect to login.html.

I added these to my config.js file:

function init_scripts() {
    var jsDirectory = "js";
    var jsExtension = ".js";

    if (JSON.parse(window.localStorage.config).use_minified) {
        jsDirectory = "js_min";
        jsExtension = ".min.js";
    }

    loadScripts([
        "../lib/ionic/js/ionic.bundle.js",
        "../cordova.js",
        "https://cdnjs.cloudflare.com/ajax/libs/angularjs-toaster/1.1.0/toaster.min.js",
        "/lib/ionic-datepicker-fork-ionic1/dist/ionic-datepicker.bundle.min.js",
        "/" + jsDirectory + "/app" + jsExtension,
        "/" + jsDirectory + "/page1" + jsExtension,
        "/" + jsDirectory + "/page2" + jsExtension,
        "/" + jsDirectory + "/page3" + jsExtension

    ], null);
}

function loadScripts(array, callback) {
    var loader = function(src, handler) {
        var script = document.createElement("script");
        script.src = src;
        script.onload = script.onreadystatechange = function() {
            script.onreadystatechange = script.onload = null;
            handler();
        }
        var head = document.getElementsByTagName("head")[0];
        (head || document.body).appendChild(script);
    };

    (function run() {
        if (array.length != 0) {
            loader(array.shift(), run);
        } else {
            callback && callback();
        }
    })();
}

In the <head> of my login.html I removed all <script> tags and replaced them:

<head>
   <script src="/js/config.js"></script>
   <!-- Functions found in config.js -->
   <script>
      init_scripts();
      init_stylesheets();
   </script>
</head>

This seems to be running quite nicely. I have also done a similar thing for the stylesheets, as you can see I call the function init_stylesheets(); which uses the same concept.

Javascript: Conditional include of a script in angularJS based webapp

ng-app makes Angular to automatically bootstrap the app once DOM has loaded.

From Angular's documentation:

You should call angular.bootstrap() after you've loaded or defined your modules. You cannot add controllers, services, directives, etc after an application bootstraps.

And so, you can, if you wish, load the .js files that constitute an Angular modules conditionally, but then you have to call angular.bootstrap() manually (and remove ng-app):

// after choice is made
if($("#dataServer").val()=="splunk")
     $.getScript("js/factory/controller-splunk.js", bootstrapAngular);
else if($("#dataServer").val()=="elastic")
     $.getScript("js/factory/controller-elastic.js", bootstrapAngular);

function bootstrapAngular(){
   angular.bootstrap(document, ["FDAApp"]);
}

Off-topic:

I would also strongly suggest adhering to one-module-per-file best practice to avoid issues with script loading order. So, define a new dependent module in your controller-splunk.js/controller-elastic.js files:

angular.module("someName", []);

and have the app module FDAApp depend on it:

angular.module("FDAApp", ["someName"])

angular cli include/exclude scripts in index.html depending on the environment

Found a solution.

Based on the answer by Ionaru in this issue

In main.ts:

if (environment.production) {

  document.write(
    `
      <script type="text/javascript">
         // JS code here
      </script>
    `
  );

  enableProdMode();
}

I believe this to be the simplest way to conditionally embed code as once was done directly on index.html

How to Conditionally Include Script Element in Angular