posts/angular/enabling-hot-module-replacement-angular-6/

[utterances-bot]

Enabling Hot Module Replacement (HMR) in Angular 6 | Coding Latte - Coding is fun

In this post, I will show you how to add Hot Module Replacement(HMR) to your angular app boost productivity when developing your apps.

https://codinglatte.com/amp/posts/angular/enabling-hot-module-replacement-angular-6/

[bnap00]

Due to duplicate line in hmr.ts

import { NgModuleRef, ApplicationRef } from '@angular/core';

it throws an error. Please remove that extra line

[mainawycliffe]

Will do thanks.

[jofftiquez]

Hi I'm getting this error

Data path "['serve']" should NOT have additional properties(hmr)

[mainawycliffe]

Hi, refer to this issue here: https://github.com/angular/angular-cli/issues/11540

[Sparker73]

Hello there. In my new main.ts I have an error:

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
import { environment } from './environments/environment';
import { hmrBootstrap } from 'hmr';
import 'hammerjs';

if (environment.production) {
  // disable Angular development mode
  enableProdMode();
}

const bootstrap = () => platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.error(err));

if (environment.hmr) {
  if (module['hot']) {
    hmrBootstrap(module, bootstrap);
  } else {
    console.error('HMR is not enabled for webpack-dev-server!');
    console.log('Are you using the --hmr flag for ng serve?');
  }
} else {
  bootstrap().catch(err => console.log(err));
}

The error says:

const bootstrap: () => Promise<void | NgModuleRef<AppModule>>
-----------------------------------------------------------------
Argument of type '() => Promise<void | NgModuleRef<AppModule>>' is not assignable to parameter of type '() => Promise<NgModuleRef<any>>'.
  Type 'Promise<void | NgModuleRef<AppModule>>' is not assignable to type 'Promise<NgModuleRef<any>>'.
    Type 'void | NgModuleRef<AppModule>' is not assignable to type 'NgModuleRef<any>'.
      Type 'void' is not assignable to type 'NgModuleRef<any>'.ts(2345)

It highlights the const bootstrap at line line 18:

hmrBootstrap(module, bootstrap);

Any clues? I would like to see this in action

[mainawycliffe]

Hi, can you remove this sections .catch(err => console.error(err)); and see if it works.

[Sparker73]

Oh yes. It looks like that solved the issue. It is working apparently well now.

One more thing. While executing command ng serve --configuration hmr

I get this: WARNING: This is a simple server for use in testing or debugging Angular applications locally. It hasn't been reviewed for security issues.

NOTICE: Hot Module Replacement (HMR) is enabled for the dev server. The project will still live reload when HMR is enabled, but to take advantage of HMR additional application code is required' (not included in an Angular CLI project by default).' See https://webpack.js.org/guides/hot-module-replacement for information on working with HMR for Webpack. To disable this warning use "hmrWarning: false" under "serve" options in "angular.json". Angular Live Development Server is listening on app.localtest.me:3000, open your browser on https://app.localtest.me:3000/

I tried to read the documentation ta that link but honestly I did not understand if I have to do something else or not. Should I ignore that warning?

[mainawycliffe]

This basically means, the extra code you added to configure HMR, modification to the main.ts among others. So, i think you are good to go, you can ignore it.

[Sparker73]

Good to know, thanks. I'll start observing behavior. Thousands of thanks 👍

[Prinsn]

This seems to work, as far as outputs are concerned, but I'm caught in a sign-in loop with our OidcClient (https://github.com/IdentityModel/oidc-client-js) where it keeps failing out of login with Error: No matching state found in storage leading to an auto-signing redirect loop due to the way we have it setup.

This happens on the UserManager.signinRedirectCallback()

[mainawycliffe]

@Prinsn Hot State Reloading might not work on all plugins and scenarios, I haven't worked with OidcClient before, but it could be something gets lost when hot reloading the state. Although I am not sure why it ain't working. Can you share a reproducible example?

[Prinsn]

Not easily. Proprietary project I'd have to decouple it from, and I'm too new to the code base to really know where to start.

Might be the way we have it setup wrong or the ASP.NET hosted browser.

I got around it with some gists trying to solve lazy loading problems, but I still had to do manual store and retrieve of user credentials to prevent the behavior.

I ran into other issues, unrelated, where a guard that does a signing redirect creates an infinite loop if I try to convert from sync to async, so I cant rule anything out.

I'm currently testing out the second of the two solutions that are here toward the end https://github.com/PatrickJS/angular-hmr/issues/76

On Wed, Aug 14, 2019, 12:13 PM Maina Wycliffe notifications@github.com wrote:

@Prinsn https://github.com/Prinsn Hot State Reloading might not work on all plugins and scenarios, I haven't worked with OidcClient before, but it could be something gets lost when hot reloading the state. Although I am not sure why it ain't working. Can you share a reproducible example?

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/coding-latte/codinglatte.com-comments/issues/4?email_source=notifications&email_token=AAYR7G64AXLOQWEG75UV2U3QEQVJDA5CNFSM4G5K4M62YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOD4JJZRQ#issuecomment-521313478, or mute the thread https://github.com/notifications/unsubscribe-auth/AAYR7G3XB32YD4DLU4672RLQEQVJDANCNFSM4G5K4M6Q .

[AlvaHub]

Hello. Is it possible to remain the state of the page and changing the css files? Like in React, when css is changed, nothing is reloaded, only the page style is changed

[arifikhsan]

thankyou

[jtuzman-sunrise]

I've got this to work, but it's pretty slow (running on windows with webstorm). Also it doesn't reliably recompile on every save. Any ideas?

[jpcmf]

How disable console updated modules messages? :)

[findelallc]

I am not able fine ! can you help me where to find project name?

I am trying to put folder name, but it doesn't work.