发表新帖
发表新帖

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

后端 未结
关注
2 1243
后悔当初
后悔当初 2021-01-06 05:38

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:

\
相关标签:
2条回答
  • 一生所求
    2021-01-06 05:41

    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;
    });
    0 讨论(0)
  • 抹茶落季
    2021-01-06 06:02

    If you configure the "lazy" attribute in the .angular-cli.json to load global libraries, you need to "lazy load" the script when needed. Here is the steps to setup.

    1.Configure .angular-cli.json in the apps[0].scripts array.

    "scripts": [
    { "input": "../node_modules/jquery/dist/jquery.js", "output": "jquery", "lazy": true }
],

    You'll get an jquery.bundle.js file in the build output.

    2.Load the generated script by appending <script> tag in the DOM (<head>) lazily.

    const script = document.createElement('script');
script.src = 'jquery.bundle.js';
script.type = 'text/javascript';
script.async = true;
script.charset = 'utf-8';
document.getElementsByTagName('head')[0].appendChild(script);
    0 讨论(0)
 看不清?
提交回复
热议问题