Angular 使用 Angular 通用延迟加载外部 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);
}

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

Angular Lazy Load External JS files with Angular Universal

javascript

server-side-rendering

angular-universal

angular