使用 Angular Universal 延迟加载外部 JS 文件

【问题标题】：Angular Lazy Load External JS files with Angular Universal使用 Angular Universal 延迟加载外部 JS 文件
【发布时间】：2020-04-14 09:48:03
【问题描述】：

https://maps.googleapis.com/maps/api/js?libraries=places&key=XXX

这是在 index.html 文件中，但我想延迟加载此脚本，因为该模块是延迟加载的，并非所有用户都需要。我不能使用直接访问 DOM 和附加脚本 el 的技巧。因为我想使用 Angular Universal ( SSR )。

【问题讨论】：

标签： javascript angular server-side-rendering angular-universal

【解决方案1】：

即使您使用的是 SSR，您也可以访问 DOM。将此添加到您的延迟加载模块模块或您的延迟加载模块的组件之一

import {DOCUMENT} from "@angular/common";
import {Renderer2} from '@angular/core';


constructor(@Inject(DOCUMENT) private document: any, private renderer: Renderer2)
{
}

constructor()
{

    const scriptElt = this.renderer.createElement('script');
    this.renderer.setAttribute(scriptElt, 'type', 'text/javascript');
    this.renderer.setAttribute(scriptElt, 'src', 'yourJSFile.js');
    this.renderer.appendChild(this.document.head, scriptElt);
}

【讨论】：