4 steps to convert angular app to angular lazy module

[bolshchikov]

Step 1: Add react-module-container

Add react-module-container npm module as your dependency. Run

npm install --save react-module-container

Step 2: Create manifest file and register your component

Create a manifest.js file that describe your future lazy module. It can be either Angular or React lazy module.

class NgMainApp extends AngularLazyComponent {
  constructor(props) {
    super(props, {
      files: [
        `${props.topology.staticsBaseUrl}angular-client.css`,
        `${props.topology.staticsBaseUrl}angular-client.bundle.js`
      ],
      module: 'myApp',
      component: 'main-app',
      unloadStylesOnDestroy: true
    });
  }
}

ModuleRegistry.registerComponent('angular.main', () => NgMainApp);

Step 3: Load the manifest file by hosting application

Load manifest.js file in the index.html of your hosting application.

<script src="<path-to-your-manifest-file>/manifest.js"></script>

Step 4: Instantiate your lazy component

Instantiate your lazy component using ModuleRegistry and render it inside hosting application.