Browsersync & Hot module replacement? about angularwebpackvisualstudio HOT 15 CLOSED

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

from angularwebpackvisualstudio.

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.

from angularwebpackvisualstudio.

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

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

from angularwebpackvisualstudio.

Sounds cool. I will have a look a this

from angularwebpackvisualstudio.

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

from angularwebpackvisualstudio.

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/

from angularwebpackvisualstudio.

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?

from angularwebpackvisualstudio.

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.

from angularwebpackvisualstudio.

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

Greetings Damien

from angularwebpackvisualstudio.

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?

from angularwebpackvisualstudio.

Hi @maksir, have you the working example?

from angularwebpackvisualstudio.

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

from angularwebpackvisualstudio.

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

from angularwebpackvisualstudio.

@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

from angularwebpackvisualstudio.

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

from angularwebpackvisualstudio.