Execute <script> tag out of <head> in angularjs

Question

I have this quite old angularjs project without npm dependencies and all of them are inside the head tag in the index.html just like so:

<head>
<meta charset="utf-8">
<meta http-equiv="Cache-control" content="max-age=0"/>
<meta http-equiv="Cache-control" content="no-cache"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

<!-- STYLES -->
<link rel="stylesheet" href="dist/css/styles.css">

<!-- SCRIPTS -->
<script src="dist/js/application/angular.min.js"></script>
<script src="dist/js/application/angular-touch.min.js"></script>
<script src="dist/js/application/angular-route.min.js"></script>
<script src="dist/js/application/angular-resource.min.js"></script>
<script src="dist/js/application/angular-sanitize.min.js"></script>
<script src="dist/js/application/angular-translate.min.js"></script>
</head>

Now I am required to add an extra dependency called iframeResizer.contentWindow.min.js which requires to be at the end of the body tag. But when I add it like this:

<script src="dist/js/application/iframeResizer.contentWindow.min.js"></script>

it appears in the DOM but it is not called in the Network tab if I put it there. Dependency shown at the DOM

What am I missing here? Does AngularJS have a custom way to manage these dependencies? How can I make it work?

Answer 1

One simple workaround would be to put it in head and to replace

<script src="dist/js/application/iframeResizer.contentWindow.min.js"></script>

By

<script src="dist/js/application/iframeResizer.contentWindow.min.js" defer></script>

This way even if in <head> it would be called after page load !

Execute <script> tag out of <head> in angularjs

Question

1 answers

solution1
1 2021-06-02 08:05:25

Execute <script> tag out of <head> in angularjs

Question

1 answers

solution1 1 2021-06-02 08:05:25

solution1
1 2021-06-02 08:05:25