Browsersync & Hot module replacement?

[RobertPaulson90]

Are these possible to support? One of the cooler benefits of Webpack!

Useful links: https://webpack.github.io/docs/hot-module-replacement.html
https://github.com/webpack/docs/wiki/hot-module-replacement-with-webpack
https://www.npmjs.com/package/browser-sync-webpack-plugin
Maybe inspiration from here: https://github.com/AngularClass/angular2-webpack-starter

[damienbod]

Sounds cool. I will have a look a this

[FabianGosebrink]

Hello @amivit
concerning the browser-sync: Did you see we support the webpack-dev-server already?
BR
Fabian

[RobertPaulson90]

Hey guys. Sounds awesome 👍 And yes I have! So I suppose it is just a matter of installing the "browser-sync-webpack-plugin" and tweaking the webpack.dev.js file to include the plugin.

Regarding HMR, I hope it's also as simple as using the --hot paramater!?? Another potentially helpful link: http://blog.stevensanderson.com/2016/05/02/angular2-react-knockout-apps-on-aspnet-core/

[nigel-dewar]

Hey Fabian, awesome work on this?

I have a query, and please dont excuse it as dum, I read the doco on this repo, and it all looks good. But when you run the solution, should we be expecting in watch mode, when we make changes to the Angular TS code and webpack does its thing, that our browser will refresh? Or is this not possible?

Is this what this initial rowsersync & Hot module request is in reference to?

[FabianGosebrink]

Hey @nigel-dewar,

if you start the application with npm start the start-command "start": "webpack-dev-server --inline --progress --port 8080", should start a webpack-dev-server which automatically refreshes the browser. Note that it does not start the browser automatically. You have to do this manually by browsing to localhost:8080.

HTH

Fabian

[nigel-dewar]

Thanks Fabian, I will give it a shot. Cheers

Sent from Samsung Mobile

-------- Original message --------
From: Fabian Gosebrink
Date:13/09/2016 15:45 (GMT+10:00)
To: damienbod/Angular2WebpackVisualStudio
Cc: nigel-dewar , Mention
Subject: Re: [damienbod/Angular2WebpackVisualStudio] Browsersync & Hot module replacement? (#4)

Hey @nigel-dewarhttps://github.com/nigel-dewar,

if you start the application with npm start the start-command "start": "webpack-dev-server --inline --progress --port 8080", should start a webpack-dev-server which automatically refreshes the browser. Note that it does not start the browser automatically. You have to do this manually by browsing to "localhost:8080".

HTH

Fabian

You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHubhttps://github.com//issues/4#issuecomment-246580751, or mute the threadhttps://github.com/notifications/unsubscribe-auth/AI94WIWKCyFjQiAm-TdlYEeN_1v2Uwl9ks5qpjhxgaJpZM4JqWdG.

[maksir]

Hi! I hate command prompt :-)
I added "hot module replacement" like this:

1. add to package.json
   "webpack-hot-middleware": "^2.10.0", "aspnet-webpack": "^1.0.11",
2. add to project.json
   "Microsoft.AspNetCore.SpaServices": "1.0.0-*"
3. add to Startup.cs, before "app.UseDefaultFiles();"
   if (env.IsDevelopment()) { app.UseWebpackDevMiddleware(new WebpackDevMiddlewareOptions { HotModuleReplacement = true }); }
4. modify webpack.dev.js
   output: { path: path.join(__dirname, 'wwwroot'), filename: 'dist/[name].bundle.js', publicPath: "/" },
5. modify boot.ts
   `import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
   import { enableProdMode } from '@angular/core';
   import { AppModule } from './app/app.module';

if (module['hot']) {
module['hot'].accept();
module['hot'].dispose(() => { platform.destroy(); });
}
else {
enableProdMode();
}
const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);
`

It's all. Run debug from VS and get hot replacment.

[damienbod]

HI @maksir, really cool, thanks, I will try it out.

Greetings Damien

[Tolitech]

With the use of HMR through the Microsoft.AspNetCore.SpaServices library, I ask: what is the possibility of using Server Rendering too?

I think it would be perfect there, top of the top performance.
(With AOT and Server rendering)

I have been trying for 1 full day to add and configure this template here, but I can not seem to make it work.

I'll keep trying.

If someone can, could they post the code snippet?

[Tolitech]

I think building automatically for AOT is also a good idea.
File project.json

"scripts": {
    "prepublish": [ "npm run ngc && npm run webpack-prod" ]
  }

[dbratsun]

Hi @maksir, have you the working example?

[Geronimo2015]

Hi @maksir / damienbod,

I tried your solution but keep running into problems.
When I just follow your changes to enable HMR I run into a MemoryFileSystem exception described here.

If I fix that by putting a backslash before the webpack output folder my index.html cannot be found anymore.
Can you please share your solution to get HMR working?
Please find attached my NOT working example.

Regards,

Jeroen
AAC3.zip

[damienbod]

Hi @Geronimo2015 I have not looked at HMR in detail yet. I will have a look at this next, will not have time until later in the week, this issue, problem has been opened for a while now.

Greetings Damien

[damienbod]

@Geronimo2015 @dbratsun @amivit
This now works, you can use the HMR using the dev build, and then the npm start.

I'll update the docs this week, let me know if you have any other issues.

Greetings Damien

[damienbod]

https://damienbod.com/2017/02/01/hot-module-replacement-with-angular-2-and-webpack/