Skip to content
Lazy Loading Angular Components made easy powered by Angular Elements
TypeScript HTML JavaScript CSS Shell
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.vscode
apps
libs
tools
.editorconfig
.gitignore
.prettierignore
.prettierrc
LICENSE Initial commit Apr 23, 2019
README.md
angular.json
jest.config.js
karma.conf.js
nx.json
package.json
tsconfig.json
tslint.json
yarn.lock

README.md

ngx-lazy-el

npm version

Easy lazy loading components 💪 by Angular Elements.

How to use it

Install Angular Elements on your project

This library depends on Angular Elements. You can install that via

$ ng add @angular/elements

Install ngx-lazy-el

Install the library from npm.

$ npm install @juristr/ngx-lazy-el

or

$ yarn add @juristr/ngx-lazy-el

Lazy load a component

Configure the Module containing the lazy loaded component

First of all, expose the Angular Component that should be loaded via a customElementComponent property.

...
@NgModule({
  declarations: [HelloWorldComponent],
  ...
  exports: [HelloWorldComponent]
})
export class HelloWorldModule {
  customElementComponent: Type<any> = HelloWorldComponent;
}

Define the lazy component map in your AppModule

Just like with the Angular Router, define the map of component selector and lazy module.

// app.module.ts
...
const lazyConfig = [
  {
    selector: 'app-hello-world',
    loadChildren: () =>
      import('./hello-world/hello-world.module').then(m => m.HelloWorldModule)
  }
];

@NgModule({
  ...
  imports: [
    ...
    NgxLazyElModule.forRoot(lazyConfig),
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

Use the lazy loaded Component

To use the lazy loaded component in another module, first of all register the CUSTOM_ELEMENT_SCHEMA.

import { ..., CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

@NgModule({
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  ...
})
export class SomeModule {}

That is needed because otherwise Angular won't recognize the tag as it is no more an Angular Component, but Custom Element.

Next, you can just use the Custom Element by applying the *ngxLazyEl directive.

<app-hello-world *ngxLazyEl [person]="person"></app-hello-world>

If it is behind a *ngIf or other non-visible component, the app-hello-world will be lazy loaded on the fly.

Questions?

Open an issue or ping me on Twitter.

You can’t perform that action at this time.