I have an Angular app which depends on a script on a server, that isn't always stable. So sometimes it takes some time to get loaded. Therefore I added a defer-attribute on it. But the App waits until the download of the deferred script is finished.
Based on my research the Angular App should render before the DOMContentLoaded. I even tried it with a new Angular App with the same result. I deferred the loading of the defer.js by 10 sec.
The HTML of the Angular App looks like the following:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Untitled</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<script src="http://localhost:8080/defer.js" defer></script>
</head>
<body>
<app-root></app-root>
</body>
</html>
Here the result in the Browser
The following HTML gets loaded in the Browser. On the Angular Scripts aren't any defer, so they should be executed IMO.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Untitled</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<script src="http://localhost:8080/defer.js" defer=""></script>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<app-root></app-root>
<script src="runtime.js" type="module"></script>
<script src="polyfills.js" type="module"></script>
<script src="styles.js" defer></script>
<script src="vendor.js" type="module"></script>
<script src="main.js" type="module"></script>
</body>
</html>
(I use the Chrome Browser Plugin 'URL Throttler' to emulate it)
2 Answers 2
Look at this link for the difference between async/defer but it seems that your problem could be resolved by adding async.
In certain situations some browsers have a bug that causes defer scripts to run out of order. Some browsers delay the DOMContentLoaded event until after the defer scripts have loaded, and some don't. Some browsers obey defer on elements with inline code and without a src attribute, and some ignore it.
Comments
I found the answer.
Scripts with type="module" are deferred by default. Therefore the browser blocks the execution to it until the previous defer-scripts are executed