{"id":13808676,"url":"https://github.com/nigrosimone/ng-lazy-load-component","last_synced_at":"2025-05-14T02:32:16.211Z","repository":{"id":152761041,"uuid":"627044987","full_name":"nigrosimone/ng-lazy-load-component","owner":"nigrosimone","description":"Lazy load Angular component into HTML template without routing.","archived":false,"fork":false,"pushed_at":"2024-01-07T07:28:32.000Z","size":3712,"stargazers_count":6,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2024-08-17T05:14:12.184Z","etag":null,"topics":["angular"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/ng-lazy-load-component","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/nigrosimone.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"open_collective":"simone-nigro"}},"created_at":"2023-04-12T17:08:26.000Z","updated_at":"2023-09-21T12:34:36.000Z","dependencies_parsed_at":"2024-08-04T01:09:26.594Z","dependency_job_id":"9c846f27-6feb-4d0c-8bbd-bc05061052d4","html_url":"https://github.com/nigrosimone/ng-lazy-load-component","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nigrosimone%2Fng-lazy-load-component","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nigrosimone%2Fng-lazy-load-component/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nigrosimone%2Fng-lazy-load-component/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nigrosimone%2Fng-lazy-load-component/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nigrosimone","download_url":"https://codeload.github.com/nigrosimone/ng-lazy-load-component/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":225273257,"owners_count":17448074,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular"],"created_at":"2024-08-04T01:01:48.849Z","updated_at":"2024-11-19T00:30:57.497Z","avatar_url":"https://github.com/nigrosimone.png","language":"TypeScript","funding_links":["https://opencollective.com/simone-nigro","https://www.paypal.com/paypalme/snwp"],"categories":["Table of contents"],"sub_categories":["Third Party Components"],"readme":"# NgLazyLoadComponent [![Build Status](https://app.travis-ci.com/nigrosimone/ng-lazy-load-component.svg?branch=main)](https://app.travis-ci.com/nigrosimone/ng-lazy-load-component) [![Coverage Status](https://coveralls.io/repos/github/nigrosimone/ng-lazy-load-component/badge.svg?branch=main)](https://coveralls.io/github/nigrosimone/ng-lazy-load-component?branch=main) [![NPM version](https://img.shields.io/npm/v/ng-lazy-load-component.svg)](https://www.npmjs.com/package/ng-lazy-load-component)\n\nLazy load Angular component into HTML template without routing.\n\n## Description\n\nThis library help to lazy load Angular component dynamically and render a at runtime. The `NgLazyLoadComponent` takes a function named `lazyImporter` as an input, which returns a `Promise` containing the component to be loaded. `NgLazyLoadComponent` has full life-cycle support for inputs and outputs.\n\nSee the [stackblitz demo](https://stackblitz.com/edit/demo-ng-lazy-load-component?file=src%2Fapp%2Fapp.component.ts).\n\n\n## Get Started\n\n*Step 1*: install `ng-lazy-load-component`\n\n```bash\nnpm i ng-lazy-load-component\n```\n\n*Step 2*: Import `NgLazyLoadComponentModule` into your app module, eg.:\n\n```ts\nimport { BrowserModule } from '@angular/platform-browser';\nimport { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { AppComponent } from './app.component';\n\nimport { NgLazyLoadComponentModule } from 'ng-lazy-load-component';\n\n@NgModule({\n  declarations: [AppComponent],\n  imports: [\n    BrowserModule,\n    CommonModule,\n    NgLazyLoadComponentModule\n  ],\n  bootstrap: [AppComponent]\n})\nexport class AppModule { }\n```\n\n*Step 2*: This is `test-lazy.ts`, an example of component with `NgModule` to lazy load (but also works with standalone component without `NgModule`), eg.:\n\n```ts\nimport { CommonModule } from '@angular/common';\nimport { Component, EventEmitter, Input, NgModule, Output } from '@angular/core';\n\n@Component({\n  selector: 'test-lazy',\n  template: `\n  Input1: {{testInput1}} \u003cbutton (click)=\"testOutput1.emit(testInput1)\"\u003eOutput1\u003c/button\u003e\u003cbr /\u003e\n  Input2: {{testInput2}} \u003cbutton (click)=\"testOutput2.emit(testInput2)\"\u003eOutput2\u003c/button\u003e\n  `\n})\nexport class TestLazyComponent {\n  @Input() testInput1 = 0;\n  @Input() testInput2 = 0;\n  @Output() testOutput1: EventEmitter\u003cnumber\u003e = new EventEmitter\u003cnumber\u003e();\n  @Output() testOutput2: EventEmitter\u003cnumber\u003e = new EventEmitter\u003cnumber\u003e();\n}\n\n@NgModule({\n  declarations: [TestLazyComponent],\n  imports: [CommonModule],\n  exports: [TestLazyComponent]\n})\nexport class TestLazyModule {}\n```\n\nIf you have the `NgModule` and the component into two separate files, you can export the component in the same file of the `NgModule`, eg.:\n\n```ts\nimport { NgModule } from '@angular/core';\nimport { TestLazyComponent } from './test-lazy.component';\n\n// also export the component\nexport { TestLazyComponent }\n\n@NgModule({\n  declarations: [TestLazyComponent],\n  imports: [CommonModule],\n  exports: [TestLazyComponent]\n})\nexport class TestLazyModule {}\n```\n\n*Step 3*: usage\n\n```ts\nimport { Component } from '@angular/core';\nimport { NgLazyLoadComponentImporter, NgLazyLoadComponentOutput, NgLazyLoadComponentInput } from 'ng-lazy-load-component';\n// import ONLY type definition of the component\nimport type { TestLazyComponent } from './test-lazy';\n\n@Component({\n  selector: 'app-root',\n  template: `\n  \u003cng-lazy-load-component \n    [lazyImporter]=\"lazyImporter\" \n    [componentInput]=\"{testInput1, testInput2}\" \n    (componentOutput)=\"onComponentOutput($event)\"\n  \u003e\n    \u003cdiv #loading\u003eLoading...\u003c/div\u003e \u003c!-- optional --\u003e\n    \u003cdiv #error\u003eOps!\u003c/div\u003e \u003c!-- optional --\u003e\n  \u003c/ng-lazy-load-component\u003e\n  `,\n})\nexport class AppComponent {\n  // NgLazyLoadComponentInput force Input type casting between ng-lazy-load-component and lazy loaded component\n  public testInput1: NgLazyLoadComponentInput\u003cTestLazyComponent, 'testInput1'\u003e = 0; // bind with test-lazy component `@Input() testInput1`\n  public testInput2: NgLazyLoadComponentInput\u003cTestLazyComponent, 'testInput2'\u003e = 0; // bind with test-lazy component `@Input() testInput2`\n\n  /** Lazy load the component with `import()` */\n  lazyImporter: NgLazyLoadComponentImporter = () =\u003e import('./test-lazy').then((m) =\u003e ({\n    component: m.TestLazyComponent, // Also works with standalone component\n    module: m.TestLazyModule // NgModule is optional!\n  }));\n\n  /** \n   * test-lazy component outputs: `@Output() testOutput1` and `@Output() testOutput2` \n   * NgLazyLoadComponentOutput force Output type casting between ng-lazy-load-component and lazy loaded component\n   */\n  onComponentOutput(event: NgLazyLoadComponentOutput\u003cTestLazyComponent\u003e) {\n    switch (event.property) {\n      case 'testOutput1': this.testInput1 = event.value + 1; break;\n      case 'testOutput2': this.testInput2 = event.value + 1; break;\n    }\n  }\n}\n```\n\nThe `import()` syntax, avoids dynamic imports using variables as paths to the modules. So needs to provide a static path to the module to let webpack to generate metadata for the module at the compile time.\n\nThe main issue of the `import()` syntax is that it starts importing the module when the compiler reads the line it is written in. So in this case, we use function syntax to avoid it's importing until the function will be called.\n\n## Support\n\nThis is an open-source project. Star this [repository](https://github.com/nigrosimone/ng-lazy-load-component), if you like it, or even [donate](https://www.paypal.com/paypalme/snwp). Thank you so much! \n\n## My other libraries\n\nI have published some other Angular libraries, take a look:\n\n - [NgSimpleState: Simple state management in Angular with only Services and RxJS](https://www.npmjs.com/package/ng-simple-state)\n - [NgHttpCaching: Cache for HTTP requests in Angular application](https://www.npmjs.com/package/ng-http-caching)\n - [NgGenericPipe: Generic pipe for Angular application for use a component method into component template.](https://www.npmjs.com/package/ng-generic-pipe)\n - [NgLet: Structural directive for sharing data as local variable into html component template](https://www.npmjs.com/package/ng-let)\n - [NgForTrackByProperty: Angular global trackBy property directive with strict type checking](https://www.npmjs.com/package/ng-for-track-by-property)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnigrosimone%2Fng-lazy-load-component","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnigrosimone%2Fng-lazy-load-component","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnigrosimone%2Fng-lazy-load-component/lists"}