Angular Lazy Load External JS файлы с Angular Universal

Question

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

Это внутри индекса. html файл, но я хочу лениво загрузить этот скрипт, потому что этот модуль загружен лениво, и он действительно не нужен для всех пользователи. Я не могу использовать трюк с прямым доступом к DOM и добавлением скрипта el. потому что я хочу использовать Angular Universal (SSR).

Answer 1

Вы можете получить доступ к DOM, даже если вы используете SSR. Добавьте это к вашему загруженному модулю модуля или одному из компонентов вашего загруженного модуля

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