ngx-mfe
Version:
A library for working with MFE in Angular in a plugin-based approach and with Angular routing.
221 lines (220 loc) • 7.71 kB
TypeScript
import { AfterViewInit, Injector, OnChanges, OnDestroy, TemplateRef, ViewContainerRef } from '@angular/core';
import { LoadMfeOptions } from '../helpers';
import { NgxMfeOptions } from '../interfaces';
import { DynamicComponentBinding, RemoteComponentLoader, RemoteComponentsCache } from '../services';
import { MfeOutletInputs, MfeOutletOutputs } from '../types';
import * as i0 from "@angular/core";
/**
* Micro-frontend directive for plugin-based approach.
* -------------
*
* This directive give you to load micro-frontend inside in HTML template.
*
* @example Loads remote component and show as embed view or as a plugin.
* ```html
* <!-- Loads EntryComponent that declared in EntryModule from dashboard micro-frontend app. -->
* <ng-container *mfeOutlet="
* 'dashboard';
* module: 'EntryModule';
* component: 'EntryComponent';
* ">
* </ng-container>
*
* <!-- Or you can use ng-template, next example works same as previous example -->
* <ng-template
* mfeOutlet="dashboard"
* mfeOutletModule="EntryModule"
* mfeOutletComponent="EntryComponent"
* >
* </ng-template>
* ```
*
* @example Loads standalone remote component. Standalone component - it is a component that does not depend on anything and does not need dependencies from other modules.
* ```html
* <!-- You can load a standalone component without declaring a module in the mfeOutletModule prop. -->
* <ng-template
* mfeOutlet="dashboard"
* mfeOutletComponent="EntryComponent"
* >
* </ng-template>
* ```
*
* @example You can sets Inputs and sets handlers for Output events of the Remote component.
* ```html
* <ng-container *mfeOutlet="
* 'dashboard';
* module: 'EntryModule';
* component: 'EntryComponent';
* inputs: { text: text$ | async };
* outputs: { click: onClick }
* ">
* </ng-container>
*```
*
* @example Loads remote component and sets custom loader, same approach for fallback view.
* ```html
* <ng-template
* mfeOutlet="dashboard"
* mfeOutletModule="EntryModule"
* mfeOutletComponent="EntryComponent"
* [mfeOutletLoader]="loaderMfe"
* [mfeOutletLoaderDelay]="2000"
* >
* </ng-template>
*
* <!-- You can specify simple HTML content or declare another MFE component, like in the example below. -->
* <ng-template #loaderMfe>
* <!-- For loader Mfe you should set mfeOutletLoader to undefined, and mfeOutletLoaderDelay to 0. For better UX. -->
* <ng-template
* mfeOutlet="loaders"
* mfeOutletModule="SpinnerModule"
* mfeOutletComponent="SpinnerComponent"
* [mfeOutletLoader]="undefined"
* [mfeOutletLoaderDelay]="0"
* >
* </ng-template>
* </ng-template>
*
* <!-- Simple HTML content. -->
* <ng-template #loader>
* <div>loading...</div>
* </ng-template>
* ```
*/
export declare class MfeOutletDirective implements OnChanges, AfterViewInit, OnDestroy {
private readonly _vcr;
private readonly _injector;
private readonly _remoteComponentLoader;
private readonly _remoteComponentCache;
private readonly _dynamicBinding;
private readonly _options;
/**
* Sets the Remote app name.
*/
mfeApp?: string;
/**
* Sets the Remote compoennt.
*/
mfeComponent?: string;
/**
* Sets the Remote module where declared Remote component (```mfeOutletComponent```)
*/
mfeModule?: string;
/**
* A map of Inputs for a micro-frontend component.
*/
inputs?: MfeOutletInputs;
/**
* A map of Outputs for a micro-frontend component.
*/
outputs?: MfeOutletOutputs;
/**
* Custom injector for micro-frontend component.
* @default current injector
*/
injector?: Injector;
/**
* MFE RemoteComponent or TemplateRef.
* Displayed when loading the micro-frontend.
*
* **Overrides the loader specified in the global library settings.**
* @default options.loader
*/
set loader(value: TemplateRef<unknown> | undefined);
/**
* The delay between displaying the contents of the bootloader and the micro-frontend .
*
* This is to avoid flickering when the micro-frontend loads very quickly.
*
* @default options.delay, if not set, then 0
*/
loaderDelay: number;
/**
* MFE RemoteComponent or TemplateRef.
* Displayed when loaded or compiled a micro-frontend with an error.
*
* **Overrides fallback the specified in the global library settings.**
* @default options.fallback
*/
set fallback(value: TemplateRef<unknown> | undefined);
/**
* Custom options for loading Mfe.
*/
options?: LoadMfeOptions;
private _loader?;
private _fallback?;
private _mfeComponentRef?;
private _loaderComponentRef?;
private _fallbackComponentRef?;
/**
* Remote component object.
*/
private get _remoteComponent();
constructor(_vcr: ViewContainerRef, _injector: Injector, _remoteComponentLoader: RemoteComponentLoader, _remoteComponentCache: RemoteComponentsCache, _dynamicBinding: DynamicComponentBinding, _options: NgxMfeOptions);
ngOnChanges(): void;
ngAfterViewInit(): void;
ngOnDestroy(): void;
/**
* Transfer MfeOutletInputs to micro-frontend component.
*
* Used when changing input "inputs" of this directive.
* @internal
*/
protected transferInputs(): void;
/**
* Render micro-frontend component.
*
* While loading bundle of micro-frontend showing loader.
* If error occur then showing fallback.
*
* Used when changing input "mfe" of this directive.
* @internal
*/
protected renderMfe(): Promise<void>;
/**
* Shows micro-frontend component.
* @internal
*/
private _showMfe;
/**
* Shows loader content.
* @internal
*/
private _showLoader;
/**
* Shows fallback content.
* @internal
*/
private _showFallback;
/**
* Shows MFE Component or TemlateRef.
* @param content MFE (Remote component) or TemlateRef.
* @param options Custom options for MfeComponentFactoryResolver.
* @internal
*/
private _createView;
/**
* Create view for modular remote component.
* @param remoteComponent MFE remote component
* @param options (Optional) object of options.
*/
private _createRemoteComponent;
/**
* Create view for standalone remote component.
* @param remoteComponent MFE remote component
* @param options (Optional) object of options.
*/
private _createStandaloneRemoteComponent;
/**
* Binding the initial data of the micro-frontend.
* @internal
*/
private _bindMfeData;
/**
* Destroy all displayed components and clear view container ref.
* @internal
*/
private _clearView;
static ɵfac: i0.ɵɵFactoryDeclaration<MfeOutletDirective, never>;
static ɵdir: i0.ɵɵDirectiveDeclaration<MfeOutletDirective, "[mfeOutlet]", ["mfeOutlet"], { "mfeApp": { "alias": "mfeOutlet"; "required": false; }; "mfeComponent": { "alias": "mfeOutletComponent"; "required": false; }; "mfeModule": { "alias": "mfeOutletModule"; "required": false; }; "inputs": { "alias": "mfeOutletInputs"; "required": false; }; "outputs": { "alias": "mfeOutletOutputs"; "required": false; }; "injector": { "alias": "mfeOutletInjector"; "required": false; }; "loader": { "alias": "mfeOutletLoader"; "required": false; }; "loaderDelay": { "alias": "mfeOutletLoaderDelay"; "required": false; }; "fallback": { "alias": "mfeOutletFallback"; "required": false; }; "options": { "alias": "mfeOutletOptions"; "required": false; }; }, {}, never, never, false, never>;
}