Lazy Loaded Component Inside Lazy Loaded Component

Lazy loading is a technique used in web development to improve the performance of an application by loading only the necessary components or modules when they are needed. In TypeScript, lazy loading can be achieved using the dynamic import statement. But what if you need to load a lazy loaded component inside another lazy loaded component? In this blog post, we will explore different solutions to this problem.

Solution 1: Using the Angular Router

If you are using Angular, you can take advantage of the Angular Router to lazy load components inside other lazy loaded components. Here’s how you can do it:

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-lazy-loaded-component',
  template: `
    
Lazy Loaded Component
    
  `
})
export class LazyLoadedComponent implements OnInit {

  constructor(private route: ActivatedRoute) { }

  ngOnInit() {
    this.route.data.subscribe(data => {
      if (data.component) {
        const component = data.component;
        import(`./${component}.component`).then(module => {
          const factory = module[`${component}ComponentNgFactory`];
          this.route.component = factory;
        });
      }
    });
  }
}

In the above code, we are using the Angular Router’s data property to pass the name of the lazy loaded component to be loaded dynamically. Inside the ngOnInit method, we subscribe to the data property and use the dynamic import statement to load the component module. Once the module is loaded, we get the component factory and assign it to the route’s component property. This will dynamically load the component inside the router-outlet.

Solution 2: Using SystemJS

If you are not using Angular, you can use SystemJS to achieve lazy loading of components inside other lazy loaded components. Here’s how you can do it:

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-lazy-loaded-component',
  template: `
    
Lazy Loaded Component
    

  `
})
export class LazyLoadedComponent implements OnInit {

  ngOnInit() {
    const container = document.getElementById('lazy-component-container');
    const script = document.createElement('script');
    script.src = 'lazy-component.js';
    script.onload = () => {
      const lazyComponent = window['LazyComponent'];
      const component = new lazyComponent();
      component.render(container);
    };
    document.head.appendChild(script);
  }
}

In the above code, we create a container element where the lazy loaded component will be rendered. We then create a script element and set its source to the JavaScript file of the lazy loaded component. Once the script is loaded, we get the lazy loaded component from the global window object and create an instance of it. Finally, we call the render method of the component and pass the container element as an argument to render the component inside it.

These are two different solutions to achieve lazy loading of components inside other lazy loaded components. Choose the one that best fits your project’s requirements and enjoy the benefits of lazy loading in your TypeScript application!

Final Output:

<

pre>

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-lazy-loaded-component',
  template: `
    <h1>Lazy Loaded Component</h1>
    <router-outlet></router-outlet>
  `
})
export class LazyLoadedComponent implements OnInit {

  constructor(private route: ActivatedRoute) { }

  ngOnInit() {
    this.route.data.subscribe(data => {
      if (data.component) {
        const component = data.component;
        import(`./${component}.component`).then(module => {
          const factory = module[`${component}ComponentNgFactory`];
          this.route.component = factory;
        });
      }
    });
  }
}