Hot Module Reloading using the Angular CLI Addon

Addins aren’t officially supported yet, but you can hack the source to plug in your custom addin.

First do the CLI linking and Project Scaffolding like so: https://discventionstech.wordpress.com/2016/09/24/extend-angular-2-cli-with-addons/

Next, Install the HMR stuff: npm i -D @angularclass/hmr @angularclass/hmr-loader
Create a shared/hmr.class.ts, copying this: https://github.com/radusuciu/webpacked-angular-with-dll/blob/master/src/utils/hmr.ts
Have app.module.ts import and extend it: https://github.com/radusuciu/webpacked-angular-with-dll/blob/master/src/app.module.ts#L27

Finally in the linked Angular CLI repo that you originally cloned from gitHub, change the following:

node_modules/angular-cli/addon/ng2/tasks/serve-webpack.ts:

config.entry.main.unshift(`webpack-dev-server/client?http://${commandOptions.host}:${commandOptions.port}/`, 'webpack/hot/dev-server');

const webpackDevServerConfiguration: IWebpackDevServerConfigurationOptions = {
  contentBase: path.resolve(this.project.root, `./${CliConfig.fromProject().defaults.sourceDir}`),
  historyApiFallback: true,
  stats: webpackDevServerOutputOptions,
  inline: true,
  hot: true // add this
};

Lastly,Add this AT 1st POSITION to plugins inside node_modules/angular-cli/addon/ng2/models/webpack-build-common.ts: new webpack.HotModuleReplacementPlugin(),

Advertisements

2 thoughts on “Hot Module Reloading using the Angular CLI Addon”

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s