@ynnck/hmr-restore v0.0.11

HMR restore

Setup instructions

Adjust environment files

// environment.ts
export const environment = {
  production: false,
  hmr: false
};

// environment.prod.ts
export const environment = {
  production: true,
  hmr: false
};

// environment.hmr.ts
export const environment = {
  production: false,
  hmr: true
};

Change angular.json

{
...
"architect": {
    "build": {
        "builder": "@angular-builders/custom-webpack:browser"
        ...
        "customWebpackConfig": {
            "path": "./apps/adex/webpack.config.prod.js",
            "replaceDuplicatePlugins": true,
            "mergeStrategies": {
                "module.rules": "append"
            }
        }
    },
    "configurations": {
        ...
        "hmr": {
            "fileReplacements": [
                {
                    "replace": "%PATH_TO_SRC%/src/environments/environment.ts",
                    "with": "%PATH_TO_SRC%/src/environments/environment.hmr.ts"
                }
            ]
        }
    },
    "serve": {
        "builder": "@angular-builders/custom-webpack:dev-server",
        "options": {
            ...
            "customWebpackConfig": {
                "path": "./apps/adex/webpack.config.js",
                "replaceDuplicatePlugins": true,
                "mergeStrategies": {
                    "module.rules": "append"
                }
            }
        },
        "configurations": {
            ...
            "hmr": {
                "hmr": true,
                "browserTarget": "%PROJECT_NAME%"
            }
        }
    },
    ...
}
}

Install packages

yarn add @angular-builders/custom-webpack
yarn add --dev @angularclass/hmr

Extend AppModule

export class AppModule extends HmrDataRestoreModule {
  constructor(
    public applicationRef: ApplicationRef,
    public store: Store<{}>
  ) {
    super(applicationRef, store, environment, module["hot"]);
  }
}

Change webpack

• add two webpack file

// webpack.config.js
const webpack = require('webpack');

module.exports = {
    ...
    devServer: {
        hot: true,
        ...
    },
    ...
};

// webpack.config.prod.js
const webpack = require('webpack');

module.exports = {
    ...
    devServer: {
        ...
    },
    ...
};

Adjust main.js

export function main() {
  if ( !environment.hmr ) {
    return platformBrowserDynamic().bootstrapModule(AppModule);
  } else {
    // todo remove angularclass from production bundle; smaller bundle if commented out
    return platformBrowserDynamic().bootstrapModule(AppModule)
      .then((ngModuleRef: any) => {
        return hmrModule(ngModuleRef, module);
      });
  }
}

bootloader(main);