Add async attribute to script tags for

[zackarychapple]

When trying to use the bootloader from AngularClass in combination with async script tags there is not currently a way to make this work with the CLI since the conversion to webpack adds the script tags programatically. Is there a way for us to manually define the script tags in the index.html and not have webpack add them?

OS?

All

Versions.

Beta.21

Repro steps.

Ng Build / Ng Serve produces the following in index.html

<script type="text/javascript" src="inline.js"></script><script type="text/javascript" src="styles.bundle.js"></script><script type="text/javascript" src="scripts.bundle.js"></script><script type="text/javascript" src="main.bundle.js"></script>

[PatrickJS]

Having more than one script tag requires a little more work to ensure order of execution. @angularclass/bootloader is only part of the story since it ensures a function passed to it gets invoked whenever the DOM is ready. I mentioned this to @TheLarkInn awhile back about a solution that should be on by default for webpack 3. I published @angularclass/bootloader to start pushing for async script tag support in the community since we're been ignore it for awhile now

[the-destro]

If we add in an option to the cli to turn off inject, you can manually add them by changing your index.html file to an index.ejs file like so:

  <script src="<%= htmlWebpackPlugin.files.chunks[chunk].entry %>"></script>
  <% } %>```. This requires no additional dependencies as it is supported via the HtmlWebpackPlugin the cli uses.

[zackarychapple]

@the-destro that looks like a great option. That would be good.

[clydin]

If async scripts are the goal, it should probably be baked into the CLI so everyone can easily benefit. Also, as previously mentioned but deserves to be repeated, order of execution is important and the CLI is the arbiter of that order.

[PatrickJS]

also keep in mind, when using the async tag, the browser is also parsing all of the scripts in parallel so the order in which they will be done is out of our hands. This would require another plugin or as I mentioned webpack to bake this in by default (webpack maybe v5).

For what's desire you can think of it like this

Promise.all(
  <script async src="inline.js"></script>,
  <script async src="styles.js"></script>,
  <script async src="scripts.js"></script>,
  <script async src="main.js"></script>
)
.then(scripts => scripts[3].bootstrap() )

Also see a prototype of this plugin
https://gist.github.com/gdi2290/ac2affca14de4940f8e8d1e05516172b

It would also be great if this plugin was included by default which would add the async tags to the html plugin
https://github.com/numical/script-ext-html-webpack-plugin

PS: this pattern is also used all the time for analytics/error capturing scripts for tracking data before the actual script is loaded

[filipesilva]

There's also the question of deciding which scripts should be async and which shouldn't. The user should be able to decide that, for stuff like analytics (like @gdi2290 highlighted) but also polyfills.

[moravcik]

Similar issue is to support defer attribute on scripts. With pure webpack config the ExtHtmlWebpackPlugin would be used:

new ExtHtmlWebpackPlugin({
    defaultAttribute: 'defer'
})

With defer we don't have to handle order of scripts:
defer scripts are also guarenteed to execute in the order that they appear in the document.
http://www.growingwiththeweb.com/2014/02/async-vs-defer-attributes.html

[e-cloud]

As webpack 3 has been released for a while, can we push this thread in a faster pace?

[clydin]

You can see this PR for further discussion and analysis: #6634

[filipesilva]

Please see @clydin's comment for a link to a similar PR, for which the answer is the same as this issue.