Lazy loading material dialog/modal content

TL;DR version

Step 1:

  public showDialog(): void {
    import('src/app/feature/my-dialog/my-dialog.module')
      .then((importedModule) => importedModule.MyDialogModule)
      .then((moduleType) => this.dialog.open(moduleType.components.MyDialogContentComponent))
  }

Step 2:

export class MyDialogModule {
  public static components = {
    MyDialogContentComponent,
  };
}

You are done, read further for explanation.

Show a material dialog in a traditional way

Let's start with an Angular project prepared with material. You can check this tutorial or just simply clone this repo, up to you.

Create a module with the dialog's content

ng g m my-dialog
cd my-dialog
ng g c my-dialog-content

<button (click)="showDialog()">
  Show me
</button>

import { ChangeDetectionStrategy, Component } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';

import { MyDialogContentComponent } from './feature/my-dialog/my-dialog-content/my-dialog-content.component';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class AppComponent {
  constructor(private dialog: MatDialog) {}

  public showDialog(): void {
    this.dialog.open(MyDialogContentComponent); // <- magic
  }
}

(don't forget to add MatDialogModule and MyDialogModule to the module you try to open this dialog)

This solution should work like a charm:

However, this is loaded with the main bundle which means your clients will download the code related to the dialog regardless of they open it or not.

Check the output of ng build --prod command, you can't observe your MyDialog module's chunk, so it is a part of the main chunk.
Protip: always check production build, you can skip some rounds of googling.

chunk {1} main.5ee3e8e18e48590dcb03.js (main) 5.1 kB [initial] [rendered]

Lazy loading to help

With lazy loaded modules you can achieve smaller initial bundle size and you can download the necessary code on demand. But maintain the balance: downloading a small piece of code may be more expensive depending on the circumstances (e.g. with high latency connection, one bigger bundle is usually smarter then a dozen of small ones), so watch your step.

Lazy load needs modules

You can say that components can also be downloaded lazy, but if you need services, state management, etc. then a component may not be enough: you need bundle together different purpose code into a module.

Let's make our existing My-Dialog module to load lazy.

First: you need to get rid of every reference which calls into MyDialogModule or any of it's parts.

E.g. check these:

  public showDialog(): void {
    this.dialog.open(MyDialogContentComponent);
  }

...

@NgModule({
  declarations: [AppComponent],
  imports: [
    MyDialogModule,

These references wire the components/modules into your main bundle. But if you are not using these object names*, it will tell webpack that a module can be separately created in it's own chunk (check code splitting and tree-shaking).

*you can only use as variable type, because ts->js transpiling will only consider the typedef of these objects at build time

Load the module and display the dialog lazy

Remove all imports from you code which mentions any part of MyDialogModule or it's components and change showDialog() method as follows:

  public showDialog(): void {
    import('src/app/feature/my-dialog/my-dialog.module')
      .then((importedModule) => importedModule.MyDialogModule)
      .then((moduleType) => this.dialog.open(moduleType.components.MyDialogContentComponent))
  }

All right, what's happening here?

The import() command should be familiar from lazy loading route modules. After importing the file (which will initiate a network request to the corresponding js chunk, check the network tab in browser dev tools), we need to select the module from that chunk. Then, simply open the dialog. But what is this moduleType.components? There is no such property in a module! You need to add it manually, like this:

export class MyDialogModule {
  public static components = {
    MyDialogContentComponent,
  };
}

It needs to be static because we don't instantiate the module, just use it statically. Also, the component list may be available in the module's componentFactories array in dev mode, but not in production mode, componentFactories is empty there!

Checking production build:

chunk {1} main.7ccae0763b130d21fb52.js (main) 4.78 kB [initial] [rendered]
chunk {6} 6.699c38ffd171596980b5.js () 648 bytes  [rendered]

Main bundle decreased in size, because we split out MyDialog module from it, and a new chunk appeared which holds the content of MyDialog module.

Afterword

Normally I'd say this is it, but here are some further good-to-know things about lazy loading for material dialog.

Putting this into a service

Since we didn't used any view-specific thing on the way, the whole code can be put into a service. So instead of importedModule.MyDialogModule, you can write importedModule[moduleName] and pass moduleName as an attribute of the dialog-opener method. Same with moduleType.components.MyDialogContentComponent -> moduleType.components[componentName].
What you cannot do is replacing the import()'s parameter with a variable, because webpack and typescript will parse the import command at build time and create a chunk accordingly, same time replacing the file name with the final chunk name along with the generated hash. This needs the parameter to be kept as a simple, hard-coded string.

  public showDialog(moduleName: string, componentName: string): void {
    import('src/app/feature/my-dialog/my-dialog.module')
      .then((importedModule) => importedModule[moduleName])
      .then((moduleType) => this.dialog.open(moduleType.components[componentName]))
  }

What I suggest is to create a module mapping logic inside your application, which can resolve a moduleName into an import Promise. E.g.

private resolveModule(moduleName: string): Promise<Type<{}>> {
  switch (moduleName) {
    case 'MyDialogModule':
      return import('src/app/feature/my-dialog/my-dialog.module');
  }
}

public showDialog(moduleName: string, componentName: string): void {
  // please do some checks as well, if everything exists what needs to
  this.resolveModule(moduleName)
    .then((importedModule) => importedModule[moduleName])
    .then((moduleType) => this.dialog.open(moduleType.components[componentName]))
}

... and you can call, like

showDialog('MyDialogModule', 'MyDialogContentComponent');

Complicating the module

You may want to put some service into your dialog module. In this case, you must specify the providedIn attribute of you service Injectable decorator (either 'root' or 'any' will fit). Including your service only in the module's providers[] array won't work.

Instead, you'll get something like this:

ERROR Error: Uncaught (in promise): NullInjectorError: R3InjectorError(AppModule)[MyServiceService -> MyServiceService -> MyServiceService]: 
  NullInjectorError: No provider for MyServiceService!
NullInjectorError: R3InjectorError(AppModule)[MyServiceService -> MyServiceService -> MyServiceService]: 
  NullInjectorError: No provider for MyServiceService!

You can say, what about creating an instance of the lazy loaded module and use the injector from it? But unfortunately, material dialog.open() won't consider that, only the root injector.