Lazy Loading JS In Angular Modules

Question

I'm lazy loading some of my feature modules in an Angular 6 application. Some of those feature modules have dependencies on JS libraries, which no other modules use, and some which are shared between lazy loaded modules.

At the moment, I'm including those libraries in the angular.json configuration in the scripts array, but that means that all those libraries are eager-loaded with the rest of the application, even though they are only used by the lazy loaded module(s).

Is there a way to lazy load JS libraries with the lazy loaded modules? I'd rather not lazy load it within a component (see How to load external scripts dynamically in Angular?) as this would mean copying the import across components within the module, I'm wondering if this can be done across a module.

Keep in mind that once your application is built, all of your libraries are stored under a vendor file. If you want them not to be bundled, remove them from your node modules and include them into your module as a TS file, that's the only way I see it. — user4676340
– user4676340, Commented Jul 24, 2018 at 12:37
That's a good idea, but some of them are 3rd party JS libraries which might be difficult to convert to TS, and to keep them up to date with the original JS library in future — marksfrancis
– marksfrancis, Commented Jul 24, 2018 at 12:43
I believe every JS code is valid TS code, so you should not have any issue regarding this. And I understand the second point, but now it's not really Angular or Typescript related anymore, it's more of a webpack question, and I can't help you with that, sorry ! — user4676340
– user4676340, Commented Jul 24, 2018 at 12:44
Unfortunately not :/ JS code is not all valid TS code - see here stackoverflow.com/a/14413739/5952236 — marksfrancis
– marksfrancis, Commented Jul 24, 2018 at 12:48
I am basing my statement on this question, could you explain why it isn't valid code ? — user4676340
– user4676340, Commented Jul 24, 2018 at 12:49

Leon · Accepted Answer · 2019-10-11 08:23:11Z

4

We are having the same situation, from our test, if the module is lazy-loading, you can simply just only import the external JS file in the lazy-loading module, then this JS library will load when accessing this module, below is our test example which import anychart.js library.


/// <reference path="../../../node_modules/anychart/dist/index.d.ts"/>
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

// third-party js lib
import '../../../node_modules/anychart/dist/js/anychart-base.min.js';

import { OrdersRoutingModule } from './orders-routing.module';
import { OrderListComponent } from './order-list/order-list.component';

@NgModule({
  imports: [CommonModule, OrdersRoutingModule],
  declarations: [OrderListComponent]
})
export class OrdersModule {}

answered Oct 11, 2019 at 8:23

Leon

3543 silver badges11 bronze badges

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

2 Comments

marcg Over a year ago

What happens if 2 module out of 10 or so modules need the same js files ? If I import the file in both modules, will this be loaded 2 times ? Also will this also work with Angular Universal ?

Spencer Gresoro Over a year ago

Exactly same question ^. Is it smart enough to tree shake? The op question I figured out using the same technique as above but im very fuzzy on what is happening under the hood.

Shirantha Madusanka · Accepted Answer · 2020-04-03 13:16:24Z

0

Add the following code in app.component.ts file and load your external js libraries in ngOnInit() method.

ngOnInit() {
    this.loadScript('../assets/js/custom.js');
  }

  public loadScript(url: string) {
    const body = <HTMLDivElement> document.body;
    const script = document.createElement('script');
    script.innerHTML = '';
    script.src = url;
    script.async = false;
    script.defer = true;
    body.appendChild(script);
  }

answered Apr 3, 2020 at 13:16

Shirantha Madusanka

1,7131 gold badge17 silver badges16 bronze badges

Collectives™ on Stack Overflow

Lazy Loading JS In Angular Modules

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related