0.7.2 • Published 4 years ago
@nicecactus/ng-react-module-wrapper v0.7.2
Table of contents
Quick start
Install @nicecactus/ng-react-module-wrapper
:
- with npm:
npm install -S @nicecactus/ng-react-module-wrapper
- with yarn:
yarn add @nicecactus/ng-react-module-wrapper
Add the module to NgModule imports
AppModule
import { NgReactModuleWrapperModule } from '@nicecactus/ng-react-module-wrapper';
@NgModule({
...
modules: [ NgReactModuleWrapperModule, ... ],
...
})
Create a loader component for your react module.
We will assume that:
- the asset-manifest.json file url is stored in
environment.assetManifestUrl
- once loaded, the react module
render()
function is exposed inwindow.myOrg.myModule
- the module will be served with the relative path
/my-module
my-module-loader.component.ts
import { Component } from '@angular/core';
import { environment } from 'projects/my-project/src/environments/environment';
@Component({
selector: 'app-my-modue-loader',
templateUrl: './my-modue-loader.component.html',
})
export class MyModuleLoaderComponent {
const assetManifestUrl = environment.assetManifestUrl;
}
my-module-loader.component.html
<ng-react-module-wrapper assetManifestUrl="{{assetManifestUrl}}" exportPath="myOrg.myModule" basename="/my-module"></ng-react-module-wrapper>
Expose the loader in the app router
AppRoutingModule
const routes: Routes = [
{
path: 'my-module',
children: [
{
path: '**',
component: MyModuleLoaderComponent,
},
],
}
];
API Reference
NgReactModuleWrapper
Selector | ng-react-module-wrapper |
Inputs
assetManifestUrl | Type: string URL to the asset-manifest.json . |
exportPath | Type: string Path to the exported render() function once the module has been loaded. |
basename | Type: string Default value: / Relative path the module is being served from. |
arguments | Type: object Default value: {} Extra arguments to pass to the render() function. |
Outputs
loaded | Type: EventEmitter<HTMLElement> Emits an event when the module has been loaded. |
rendered | Type: EventEmitter<any> Emits an event when the module has been rendered. |