{"id":22965695,"url":"https://github.com/lb1997ccb/ng-lazy-feature-loader","last_synced_at":"2026-04-26T12:32:45.881Z","repository":{"id":246117725,"uuid":"820147043","full_name":"lb1997ccb/ng-lazy-feature-loader","owner":"lb1997ccb","description":"Showcases Angular's capability to dynamically load components and modules on-demand, enhancing app performance and user interaction through efficient resource loading.","archived":false,"fork":false,"pushed_at":"2024-06-26T10:21:36.000Z","size":167,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-02T04:29:38.412Z","etag":null,"topics":["angular","component-factory-resolver","dynamic-components","feature-loader","lazy-loading","resolver","spa"],"latest_commit_sha":null,"homepage":"","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/lb1997ccb.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"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}},"created_at":"2024-06-25T22:39:29.000Z","updated_at":"2024-06-26T10:21:40.000Z","dependencies_parsed_at":"2025-04-02T04:27:26.992Z","dependency_job_id":"97017d66-6ee8-4779-8282-da82632892c5","html_url":"https://github.com/lb1997ccb/ng-lazy-feature-loader","commit_stats":null,"previous_names":["lb1997ccb/ng-lazy-feature-loader"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/lb1997ccb/ng-lazy-feature-loader","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lb1997ccb%2Fng-lazy-feature-loader","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lb1997ccb%2Fng-lazy-feature-loader/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lb1997ccb%2Fng-lazy-feature-loader/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lb1997ccb%2Fng-lazy-feature-loader/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/lb1997ccb","download_url":"https://codeload.github.com/lb1997ccb/ng-lazy-feature-loader/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lb1997ccb%2Fng-lazy-feature-loader/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32297895,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-26T09:34:17.070Z","status":"ssl_error","status_checked_at":"2026-04-26T09:34:00.993Z","response_time":129,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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","component-factory-resolver","dynamic-components","feature-loader","lazy-loading","resolver","spa"],"created_at":"2024-12-14T20:16:11.819Z","updated_at":"2026-04-26T12:32:45.867Z","avatar_url":"https://github.com/lb1997ccb.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# ng-lazy-feature-loader\n\nThis project demonstrates Angular's capability to dynamically load components and modules on-demand, enhancing application performance by loading resources only when needed.\n\n## Overview\n\nAngular applications can benefit from lazy loading techniques to improve initial loading times and resource efficiency. This project showcases how to implement dynamic component loading without relying on Angular's built-in routing mechanism.\n\n## Features\n\n- **Dynamic Component Loading:** Load components dynamically based on user interactions or application state.\n- **Efficient Resource Management:** Components and modules are loaded lazily, improving initial load times.\n- **Flexible Integration:** Easily integrate dynamic loading into existing Angular projects without routing dependencies.\n\n## Usage\n\n### Installation\n\nTo get started with this project, follow these steps:\n\n1. Clone this repository.\n2. Install dependencies using `npm install`.\n3. Run the application using `ng serve`.\n\n## FeatureLoaderService\n\nThe `FeatureLoaderService` in this project facilitates dynamic loading of Angular components based on asynchronous resolution through resolvers. It enhances modularity and performance by selectively loading components only when needed.\n\n### Overview\n\nThe `FeatureLoaderService` utilizes Angular's Ivy APIs, specifically the `ViewContainerRef.createComponent` method, to dynamically instantiate and load components into designated `ViewContainerRef` instances. This approach avoids static imports and enables lazy loading of components, optimizing initial loading times and reducing the application's initial bundle size.\n\n### Usage\n\n#### Dependencies\n\nEnsure the following resolvers and components are correctly implemented and available for resolution:\n\n- `HomeFeatureResolver`: Resolves to `HomeFeatureComponent`\n- `NewsFeatureResolver`: Resolves to `NewsPageComponent`\n- `ServiceFeatureResolver`: Resolves to `ServicePageComponent`\n\n#### Methods\n\n- **`loadHomeFeatureComponent(container: ViewContainerRef): Promise\u003cHomeFeatureComponent\u003e`**\n\n  - Loads the `HomeFeatureComponent` into the specified `ViewContainerRef`.\n\n- **`loadNewsFeatureComponent(container: ViewContainerRef): Promise\u003cNewsPageComponent\u003e`**\n\n  - Loads the `NewsPageComponent` into the specified `ViewContainerRef`.\n\n- **`loadServiceFeatureComponent(container: ViewContainerRef): Promise\u003cServicePageComponent\u003e`**\n  - Loads the `ServicePageComponent` into the specified `ViewContainerRef`.\n\n#### Example\n\n```typescript\nimport {\n  Component,\n  AfterViewInit,\n  ViewChild,\n  ViewContainerRef,\n} from \"@angular/core\";\nimport { FeatureLoaderService } from \"./service/feature-loader/feature-loader.service\";\n\n@Component({\n  selector: \"app-root\",\n  standalone: true,\n  templateUrl: \"./app.component.html\",\n  styleUrls: [\"./app.component.css\"],\n})\nexport class AppComponent implements AfterViewInit {\n  @ViewChild(\"container\", { read: ViewContainerRef, static: true })\n  container!: ViewContainerRef;\n\n  constructor(private featureLoaderService: FeatureLoaderService) {}\n\n  ngAfterViewInit() {\n    // Example: Load HomeFeatureComponent dynamically\n    this.featureLoaderService\n      .loadHomeFeatureComponent(this.container)\n      .then((homeComponent) =\u003e {\n        homeComponent.featureRequested!.subscribe((eventKey: string) =\u003e {\n          this.handleFeatureRequested(eventKey);\n        });\n      })\n      .catch((error) =\u003e {\n        console.error(\"Error loading home feature component:\", error);\n      });\n  }\n}\n```\n- **handleFeatureRequested:** This method is located within the `AppComponent` and handles the logic for dynamically loading different feature components based on the `eventKey`.\n\n## Resolvers\n\n### HomeFeatureResolver\n\nThe `HomeFeatureResolver` asynchronously resolves to the `HomeFeatureComponent`, allowing dynamic loading based on demand.\n\n### NewsFeatureResolver\n\nThe `NewsFeatureResolver` asynchronously resolves to the `NewsPageComponent`, facilitating lazy loading for news-related features.\n\n### ServiceFeatureResolver\n\nThe `ServiceFeatureResolver` asynchronously resolves to the `ServicePageComponent`, enabling selective loading of service-related components.\n\n## AppComponent\n\nThe `AppComponent` serves as the entry point of the application. It demonstrates how to use the `FeatureLoaderService` to dynamically load feature components into the view.\n\n## Contributing\n\nContributions to enhance the `FeatureLoaderService` or its associated resolvers are welcome. Please follow the existing patterns and guidelines.\n\n## License\n\nThis project is licensed under the MIT License. See the [LICENSE](./LICENSE) file for details.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flb1997ccb%2Fng-lazy-feature-loader","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flb1997ccb%2Fng-lazy-feature-loader","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flb1997ccb%2Fng-lazy-feature-loader/lists"}