In angular-cli, how does the "lazy" attribute work to load global libraries?

Question

By adding them to the scripts property of .angular-cli file, one can load global scripts into your app. This example comes from the documentation:

"scripts": [
  "global-script.js",
  { "input": "lazy-script.js", "lazy": true },
  { "input": "pre-rename-script.js", "output": "renamed-script" },
]

I am however a bit confused by the "lazy" attribute. When building your app, the to-be-lazy-loaded script is no longer packaged in the scripts.bundle.js file.

But how will the library then be loaded after all? What do I have to do to load the file when necessary?

Answer 1

As an alternative to manipulating the DOM in step #2 of Will Huang's accepted answer, it's now also possible to use the dynamic import functionality of esnext with TypeScript, as outlined in this post.

Using this approach, one could then add the following to a lazy-loaded NgModule:

import('jquery')
    .then((module: Function) => {
        window['$'] = module;
    });