This project demonstrates Angular's capability to dynamically load components and modules on-demand, enhancing application performance by loading resources only when needed.
Angular 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.
- Dynamic Component Loading: Load components dynamically based on user interactions or application state.
- Efficient Resource Management: Components and modules are loaded lazily, improving initial load times.
- Flexible Integration: Easily integrate dynamic loading into existing Angular projects without routing dependencies.
To get started with this project, follow these steps:
- Clone this repository.
- Install dependencies using
npm install
. - Run the application using
ng serve
.
The 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.
The 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.
Ensure the following resolvers and components are correctly implemented and available for resolution:
HomeFeatureResolver
: Resolves toHomeFeatureComponent
NewsFeatureResolver
: Resolves toNewsPageComponent
ServiceFeatureResolver
: Resolves toServicePageComponent
-
loadHomeFeatureComponent(container: ViewContainerRef): Promise<HomeFeatureComponent>
- Loads the
HomeFeatureComponent
into the specifiedViewContainerRef
.
- Loads the
-
loadNewsFeatureComponent(container: ViewContainerRef): Promise<NewsPageComponent>
- Loads the
NewsPageComponent
into the specifiedViewContainerRef
.
- Loads the
-
loadServiceFeatureComponent(container: ViewContainerRef): Promise<ServicePageComponent>
- Loads the
ServicePageComponent
into the specifiedViewContainerRef
.
- Loads the
import {
Component,
AfterViewInit,
ViewChild,
ViewContainerRef,
} from "@angular/core";
import { FeatureLoaderService } from "./service/feature-loader/feature-loader.service";
@Component({
selector: "app-root",
standalone: true,
templateUrl: "./app.component.html",
styleUrls: ["./app.component.css"],
})
export class AppComponent implements AfterViewInit {
@ViewChild("container", { read: ViewContainerRef, static: true })
container!: ViewContainerRef;
constructor(private featureLoaderService: FeatureLoaderService) {}
ngAfterViewInit() {
// Example: Load HomeFeatureComponent dynamically
this.featureLoaderService
.loadHomeFeatureComponent(this.container)
.then((homeComponent) => {
homeComponent.featureRequested!.subscribe((eventKey: string) => {
this.handleFeatureRequested(eventKey);
});
})
.catch((error) => {
console.error("Error loading home feature component:", error);
});
}
}
- handleFeatureRequested: This method is located within the
AppComponent
and handles the logic for dynamically loading different feature components based on theeventKey
.
The HomeFeatureResolver
asynchronously resolves to the HomeFeatureComponent
, allowing dynamic loading based on demand.
The NewsFeatureResolver
asynchronously resolves to the NewsPageComponent
, facilitating lazy loading for news-related features.
The ServiceFeatureResolver
asynchronously resolves to the ServicePageComponent
, enabling selective loading of service-related components.
The AppComponent
serves as the entry point of the application. It demonstrates how to use the FeatureLoaderService
to dynamically load feature components into the view.
Contributions to enhance the FeatureLoaderService
or its associated resolvers are welcome. Please follow the existing patterns and guidelines.
This project is licensed under the MIT License. See the LICENSE file for details.