Question 173713 in Html Question posted in
Some basic documentation can be found here.

Html – Script with defer prevents loading of Angular App

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)

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    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


  2. 0

    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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search