Angular Lazy Load External JS files with Angular Universal

Question

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

This is inside index.html file, but i want to lazy load this script, because that module is lazy loaded and it's really not necessary for all users. I can't use trick with directly accessing the DOM and appending script el. because I want to use Angular Universal ( SSR ).

David · Accepted Answer · 2020-04-14 09:58:10Z

1

You can access the DOM even if you are using SSR. Add this to your lazy loaded module module or one of the components of your lazy loaded module

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

answered Apr 14, 2020 at 9:58

David

34.6k13 gold badges90 silver badges124 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular Lazy Load External JS files with Angular Universal

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related