0.7.2 • Published 4 years ago

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

Weekly downloads
267
License
MIT
Repository
github
Last release
4 years ago

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

Selectorng-react-module-wrapper

Inputs

assetManifestUrlType: string URL to the asset-manifest.json.
exportPathType: string Path to the exported render() function once the module has been loaded.
basenameType: string Default value: / Relative path the module is being served from.
argumentsType: object Default value: {} Extra arguments to pass to the render() function.

Outputs

loadedType: EventEmitter<HTMLElement> Emits an event when the module has been loaded.
renderedType: EventEmitter<any> Emits an event when the module has been rendered.
0.7.2

4 years ago

0.7.1

4 years ago

0.7.0

4 years ago

0.6.3

4 years ago

0.6.2

4 years ago

0.6.4

4 years ago

0.6.1

4 years ago

0.6.0

4 years ago

0.5.6

4 years ago

0.5.5

4 years ago

0.5.4

4 years ago

0.5.2

4 years ago

0.5.1

4 years ago

0.5.0

4 years ago

0.4.0

4 years ago

0.3.0

4 years ago

0.2.5

4 years ago