@nicecactus/ng-react-module-wrapper v0.7.2

Table of contents

• Quick start
• API Reference

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 in window.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

Inputs

Outputs