postinstall.js

/** 
 * @author: Andrea Simeoni
 * @github: https://github.com/insanediv
 * @date: 02 Nov 2019
 ##-----------------------------------------------------------------------------##
 ##  ___| |_ __ _  ___| | __     ___ _ __ ___   __ _ ___| |__   ___ _ __ ___    ##
 ## / __| __/ _` |/ __| |/ /____/ __| '_ ` _ \ / _` / __| '_ \ / _ \ '__/ __|   ##
 ## \__ \ || (_| | (__|   <_____\__ \ | | | | | (_| \__ \ | | |  __/ |  \__ \   ##
 ## |___/\__\__,_|\___|_|\_\    |___/_| |_| |_|\__,_|___/_| |_|\___|_|  |___/   ##
 ##-----------------------------------------------------------------------------##
 * 
 * This script is meant to fix the Angular 4 issue related to AOT compilation of a
 * lazy-loaded @NgModule placed inside the /node_modules folder.
 * https://stackoverflow.com/questions/46774625/aot-compiler-include-lazy-loaded-external-module
 * 
 * The solution is to run a script to copy source files from /node_modules into the project's /app folder
 * in order to make the loaded @NgModule visible during the build phase.
 * 
 * This is a postinstall script, then it should be run in the following order:
 * 
 * > npm install
 * > node postinstall.js
 * > ng build --prod 
 * 
*/

const fs = require('fs');
const fse = require('fs-extra');


class PostInstall {

  copyFiles(fromDir, toDir) {
    fse.copy(fromDir, toDir, err => {
      if (err) return console.error(err);
      console.log(`Source files copied from ${fromDir} to ${toDir}`);
    });
  }

  /** 
   * 
   * Replaces loadChildren references to node_modules (es. @liwebcorp/) with the local directory we just copied (./@liwebcorp/)
   *
   * i.e:
   * If the original file has a reference like this
   * export const appRoutes: Routes = [ { path: 'awesome-feature', loadChildren: '@liwebcorp/angular-app/src/app/feature.module#FeatureModule'} ]
   * We are going to change it like this
   * export const appRoutes: Routes = [ { path: 'awesome-feature', loadChildren: './@liwebcorp/angular-app/src/app/feature.module#FeatureModule'} ]
   * 
   * @param routesFile Angular routes file referencing node_modules dependency for lazy loading 
   * @param replaceFn A lambda function (fileText: string) => string to replace the file's text 
   */
  replaceReferencesInRoutesFile(routesFile, replaceFn) {
    fs.readFile(routesFile, 'utf8', function (err, data) {
      if (err) {
        return console.log(err);
      }
      var result = replaceFn(data);

      fs.writeFile(routesFile, result, 'utf8', function (err) {
        if (err) { 
          return console.log(err); 
        }
        console.log(`Routes references in ${routesFile} updated`);
      });
    });
  }
}

const MAIN_PROJECT_ROUTES_FILE = './src/app/app.routes.ts';
const NODE_MODULES_DEPENDENCY = '@liwebcorp/angular-app/src/app';
const COPY_FROM = `./node_modules/${NODE_MODULES_DEPENDENCY}`;
const COPY_TO = `./src/app/${NODE_MODULES_DEPENDENCY}`;

const postinstall = new PostInstall();

postinstall.copyFiles(COPY_FROM, COPY_TO);
postinstall.replaceReferencesInRoutesFile(MAIN_PROJECT_ROUTES_FILE, fileText => {
  return fileText.replace(/loadChildren: '@liwebcorp/g, "loadChildren: './@liwebcorp/");
});