ng-lazy-load-component - npm Package Compare versions

Comparing version 15.0.3 to 15.0.4

lib/ng-lazy-load-component.component.d.ts

		@@ -1,3 +0,4 @@
		import { Injector, Type, EventEmitter, OnDestroy, OnChanges, SimpleChanges, ChangeDetectorRef } from '@angular/core';
		import { Injector, Type, ComponentRef, EventEmitter, OnDestroy, OnChanges, SimpleChanges, ChangeDetectorRef } from '@angular/core';
		import * as i0 from "@angular/core";
		declare type ExtractEventEmitter<P> = P extends EventEmitter<infer T> ? T : never;
		export declare type NgLazyLoadComponentImporter = () => Promise<{
		@@ -8,5 +9,5 @@ component: Type<any>;
		}>;
		export declare type NgLazyLoadComponentOutput = {
		property: string;
		value: any;
		export declare type NgLazyLoadComponentOutput<T = Record<string, any>> = {
		property: keyof T;
		value: ExtractEventEmitter<T[keyof T]> \| any;
		};
		@@ -23,3 +24,3 @@ export declare class NgLazyLoadComponentComponent implements OnDestroy, OnChanges {
		protected error: boolean;
		private componentRef;
		componentRef: ComponentRef<any>;
		private subOutput;
		@@ -30,2 +31,3 @@ constructor(injector: Injector, cdr: ChangeDetectorRef);
		load(lazyImporter: NgLazyLoadComponentImporter): Promise<void>;
		unload(): void;
		private setInput;
		@@ -37,1 +39,2 @@ private setOutput;
		}
		export {};

package.json

		{
		"name": "ng-lazy-load-component",
		"version": "15.0.3",
		"description": "Lazy load Angular component into HTML template.",
		"version": "15.0.4",
		"description": "Lazy load Angular component into HTML template without routing.",
		"repository": {
		@@ -6,0 +6,0 @@ "type": "git",

README.md

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

		Lazy load Angular component into HTML template.
		Lazy load Angular component into HTML template without routing.

		## Description

		This 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.
		This 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.

		@@ -43,3 +43,3 @@ See the [stackblitz demo](https://stackblitz.com/edit/demo-ng-lazy-load-component?file=src%2Fapp%2Fapp.component.ts).

		Step 2: This is `test-lazy.ts` an example of component with `NgModule` to lazy load (but also works with standalone component), eg.:
		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.:

		@@ -72,2 +72,19 @@ ```ts

		If you have the `NgModule` and the component into two separate files, you can export the component in the same file of the `NgModule`, eg.:

		```ts
		import { NgModule } from '@angular/core';
		import { TestLazyComponent } from './test-lazy.component';

		// also export the component
		export { TestLazyComponent }

		@NgModule({
		declarations: [TestLazyComponent],
		imports: [CommonModule],
		exports: [TestLazyComponent],
		})
		export class TestLazyModule {}
		```

		Step 3: usage
		@@ -78,2 +95,4 @@
		import { NgLazyLoadComponentImporter, NgLazyLoadComponentOutput } from 'ng-lazy-load-component';
		// import ONLY type definition of the component
		import type { TestLazyComponent } from './test-lazy';

		@@ -97,2 +116,3 @@ @Component({

		/** Lazy load the component with `import()` */
		lazyImporter: NgLazyLoadComponentImporter = () => import('./test-lazy').then((m) => ({
		@@ -104,3 +124,3 @@ component: m.TestLazyComponent, // Also works with standalone component
		/** test-lazy component outputs: `@Output() testOutput1` and `@Output() testOutput2` */
		onComponentOutput(event: NgLazyLoadComponentOutput) {
		onComponentOutput(event: NgLazyLoadComponentOutput<TestLazyComponent>) {
		switch (event.property) {
		@@ -114,2 +134,6 @@ case 'testOutput1': this.testInput1 = event.value + 1; break;

		The `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.

		The 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.

		## Support
		@@ -116,0 +140,0 @@

esm2020/lib/ng-lazy-load-component.component.mjs