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>
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)
I found the answer. Scripts with
type="module"are deferred by default. Therefore the browser blocks the execution to it until the previousdefer-scripts are executed