Include script tag conditionally in angular 4 app

Question

I am using Angular 4.4.6 and have <script> tag outside my app-root. it looks like this

<script src="someUrlForQa"></script>

and i want to delete this one and include

<script src="someUrlForProd"></script>

when it will be on production.

What is the right way to do it? Maybe using angular-cli.json somehow?

This question on the CLI repo should help you. github.com/angular/angular-cli/issues/4288 — user4676340
– user4676340, Commented Mar 27, 2018 at 14:29

joh04667 · Accepted Answer · 2018-03-27 18:01:35Z

1

You could do this using plain Javascript.

let el = document.createElement('script');

if(condition) {
   el.src = 'someUrl';
}
else {
   el.src = 'otherUrl';
}

document.head.append(el);

However, it's against the Angular style guide to interact directly with the DOM. If you do this in Angular, the 'Angular way' of creating this would be by injecting and using the Renderer2 service:

constructor(private _renderer: Renderer2) {}

public someMethod() {
    let el = this._renderer.createElement('script');
    el.src = 'conditionalUrl';
    this._renderer.appendChild(el, this_renderer.selectRootElement('body'));
}

As far as when to do this in Angular, you could hijack the APP_INITIALIZER service and provide your own initialization code. Check out this answer for more information.

edited Mar 27, 2018 at 18:01

answered Mar 27, 2018 at 15:13

joh04667

7,48730 silver badges34 bronze badges

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

Collectives™ on Stack Overflow

Include script tag conditionally in angular 4 app

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related