Angular 10 | Loading js script in app.component.html if environment production false

Question

I try to load a js file, which should trigger only in dev mode.

I have this code in my app.component.html:

<p *ngIf="!environment"> works </p>
<script *ngIf="!environment" src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script *ngIf="!environment" src="/src/assets/js/my.js"></script>

environment is false.

Note that it works fine for the <p> tag, but not for the <script> tags, why?

EDIT

To clarify, the script tags do NOT load, but they should, because environment is false. I dont get any errors, nothing. They are simply not there, but the p tag does load.

here is ur answer --> https://stackoverflow.com/questions/35264308/why-does-ngif-not-remove-script-tags-from-my-code — sagat, Jul 30 '20 at 09:12
@sagat while that question is similar, I don't believe it's the same as this one. That one is for AngularJS version 1, so the behaviour could've changed. The problem "symptoms" are also exactly the opposite from OP's, in that question they are asking why the script tags *are* loaded _regardless_ of ng-if, while here in OP's question they are *not* loaded at all. — noppa, Jul 30 '20 at 09:18
in the question he is saying that it always loads no matter if its false or true. So the answer from the upper thread should be right. Cause this is Browser behavior I think this would not have changed with angular 2+. BUT, I might be wrong about that. — sagat, Jul 30 '20 at 09:21
Ahhh okay. That was my mistake then :) Srry for confusion. I didnt think about !environment. But how come u only ask for environment and not environment.production? — sagat, Jul 30 '20 at 09:24
@sagat environment is environment.production, it looks like that in the .ts file: `environment = environment.production` — Roman, Jul 30 '20 at 09:26
Okay, then this might be a helpful answer for ur question --> https://stackoverflow.com/questions/38088996/adding-script-tags-in-angular-component-template Also read the question and got to the github link — sagat, Jul 30 '20 at 09:27
Same principle here, but loading script file instead of script content: https://stackoverflow.com/a/61205045/1160794 — David, Jul 30 '20 at 10:04

score 0 · Accepted Answer · answered Jul 30 '20 at 10:47

It must be done in the component.ts file.

The special issue here is that my my.js file depends on the jquery.min.js file, which means I need a callback.

The below example will work.

If you use this.appendScript('assets/js/my.js') in the callback it wont work, because the this does reference the wrong scope. If I find a solution, I will add it.

appendScript(src, callbackFunc) {
    var script = document.createElement('script'); 
    script.type = 'text/javascript';
    script.src = src;
    script.onload = callbackFunc;  
    document.body.appendChild(script);
}

ngOnInit(): void {
  this.navigation.loadView(this.navigation.getView(1).name); // Init first view
  
  if (!environment.production) {
    this.appendScript('assets/js/jquery.min.js', function () {
      var script = document.createElement('script'); 
      script.type = 'text/javascript';
      script.src = 'assets/js/my.js';  
      document.body.appendChild(script);
      //this.appendScript('assets/js/my.js');
    });
  }

Angular 10 | Loading js script in app.component.html if environment production false

1 Answers1