@ynnck/hmr-restore
v0.0.11
Published
Downloads
4
Readme
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);