https://github.com/juristr/ngx-lazy-el

Lazy Loading Angular Components made easy powered by Angular Elements
https://github.com/juristr/ngx-lazy-el

angular lazy-loading performance

Last synced: about 2 months ago
JSON representation

Lazy Loading Angular Components made easy powered by Angular Elements

• Host: GitHub
• URL: https://github.com/juristr/ngx-lazy-el
• Owner: juristr
• License: mit
• Created: 2019-04-23T21:07:44.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2023-01-07T04:55:47.000Z (over 1 year ago)
• Last Synced: 2024-07-07T17:23:40.370Z (3 months ago)
• Topics: angular, lazy-loading, performance
• Language: TypeScript
• Homepage: https://juri.dev
• Size: 5.15 MB
• Stars: 27
• Watchers: 5
• Forks: 9
• Open Issues: 30
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# ngx-lazy-el

[![npm version](https://badge.fury.io/js/%40juristr%2Fngx-lazy-el.svg)](https://badge.fury.io/js/%40juristr%2Fngx-lazy-el)

Easy lazy loading components 💪 by Angular Elements.

## How to use it

Also check out my talks about using this library

- [ngRome 2019 - Lazy Loading on Steroids (with Angular Elements)](https://youtu.be/weVK53N-x-8)

- [JSBE.io - Lazy Loading on Steroids with NG Elements](https://youtu.be/-YdM-1xZBoI)

### 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

#### 1) 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 = HelloWorldComponent;

}

```

#### 2) 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 {}

```

#### 3) 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],

  imports: [NgxLazyElModule]

  ...

})

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. Also note that I import the `NgxLazyElModule` if you haven't already. Otherwise the `*ngxLazyEl` directive won't work.

Now you can just use the Custom Element by applying the `*ngxLazyEl` directive.

```

```

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](https://github.com/juristr/ngx-lazy-el/issues) or ping me [on Twitter](https://twitter.com/juristr).