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

Question

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

这是在index.html文件中，但我想延迟加载这个脚本，因为该模块是延迟加载的，并且对于所有用户来说实际上并不是必需的。 我无法使用直接访问 DOM 并附加脚本 el 的技巧。因为我想使用 Angular Universal (SSR)。

Answer 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);
}