1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.
  2. Anuncie Aqui
    Anuncie aqui você Também: fdantas@4each.com.br

Angular CLI Hot Module Reload

Discussão em 'Angular' iniciado por Moshe, Maio 22, 2025.

  1. Moshe

    Moshe Guest

    I followed this github story: https://github.com/angular/angular-cli/wiki/stories-configure-hmr

    I am able to see changes after auto-refresh when I do ng serve (environment is Dev), however with ng serve --hmr -e=hmr, the page auto refreshes (like a flicker) without changes. I have to press F5 to see the changes.

    HMR works fine, because I see my terminal output things like:

    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.github.io/docs/hot-module-replacement.html
    for information on working with HMR for Webpack.
    To disable this warning use "ng set --global warnings.hmrWarning=false"
    ** NG Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200 **
    Date: 2017-08-15T16:20:34.579Z
    Hash: f22425f08800b973e209
    Time: 27866ms
    chunk {about.module} about.module.chunk.js, about.module.chunk.js.map () 10.2 kB {main} [rendered]
    chunk {admin.module} admin.module.chunk.js, admin.module.chunk.js.map () 21.9 kB {main} [rendered]
    chunk {carbuilder.module} carbuilder.module.chunk.js, carbuilder.module.chunk.js.map () 56.9 kB {main} [rendered]
    chunk {checkout.module} checkout.module.chunk.js, checkout.module.chunk.js.map () 117 kB {main} [rendered]
    chunk {common} common.chunk.js, common.chunk.js.map (common) 79.8 kB {main} [rendered]
    chunk {contact.module} contact.module.chunk.js, contact.module.chunk.js.map () 535 kB {main} [rendered]
    chunk {details.module} details.module.chunk.js, details.module.chunk.js.map () 44 kB {main} [rendered]
    chunk {garage.module} garage.module.chunk.js, garage.module.chunk.js.map () 14.5 kB {main} [rendered]
    chunk {home.module} home.module.chunk.js, home.module.chunk.js.map () 13.8 kB {main} [rendered]
    chunk {inline} inline.bundle.js, inline.bundle.js.map (inline) 30.8 kB [entry] [rendered]
    chunk {lease-options.module} lease-options.module.chunk.js, lease-options.module.chunk.js.map () 35.6 kB {main} [rendered]
    chunk {main} main.bundle.js, main.bundle.js.map (main) 230 kB {vendor} [initial] [rendered]
    chunk {makes-page.module} makes-page.module.chunk.js, makes-page.module.chunk.js.map () 16.9 kB {main} [rendered]
    chunk {manage-cars.module} manage-cars.module.chunk.js, manage-cars.module.chunk.js.map () 7.82 kB {main} [rendered]
    chunk {manage-edmunds.module} manage-edmunds.module.chunk.js, manage-edmunds.module.chunk.js.map () 17.9 kB {main} [rendered]
    chunk {manage-fuel.module} manage-fuel.module.chunk.js, manage-fuel.module.chunk.js.map () 41 kB {main} [rendered]
    chunk {manage-users.module} manage-users.module.chunk.js, manage-users.module.chunk.js.map () 45 kB {main} [rendered]
    chunk {models.module} models.module.chunk.js, models.module.chunk.js.map () 161 kB {main} [rendered]
    chunk {polyfills} polyfills.bundle.js, polyfills.bundle.js.map (polyfills) 204 kB {inline} [initial] [rendered]
    chunk {profile.module} profile.module.chunk.js, profile.module.chunk.js.map () 19.4 kB {main} [rendered]
    chunk {scripts} scripts.bundle.js, scripts.bundle.js.map (scripts) 700 kB {inline} [initial] [rendered]
    chunk {search.module} search.module.chunk.js, search.module.chunk.js.map () 617 kB {main} [rendered]
    chunk {styles} styles.bundle.js, styles.bundle.js.map (styles) 387 kB {inline} [initial] [rendered]
    chunk {styles.module} styles.module.chunk.js, styles.module.chunk.js.map () 32.6 kB {main} [rendered]
    chunk {vendor} vendor.bundle.js, vendor.bundle.js.map (vendor) 7.47 MB [initial] [rendered]

    webpack: Compiled successfully.
    webpack: Compiling...
    Date: 2017-08-15T16:20:53.204Z
    Hash: 706aa17d2700ff62481f
    Time: 1991ms
    chunk {about.module.0} about.module.0.chunk.js, about.module.0.chunk.js.map () 10.2 kB {main} [rendered]
    chunk {admin.module.0} admin.module.0.chunk.js, admin.module.0.chunk.js.map () 21.9 kB {main} [rendered]
    chunk {carbuilder.module.0} carbuilder.module.0.chunk.js, carbuilder.module.0.chunk.js.map () 56.9 kB {main} [rendered]
    chunk {checkout.module.0} checkout.module.0.chunk.js, checkout.module.0.chunk.js.map () 117 kB {main} [rendered]
    chunk {common} common.chunk.js, common.chunk.js.map (common) 79.8 kB {main}
    chunk {contact.module.0} contact.module.0.chunk.js, contact.module.0.chunk.js.map () 535 kB {main} [rendered]
    chunk {details.module.0} details.module.0.chunk.js, details.module.0.chunk.js.map () 44 kB {main} [rendered]
    chunk {garage.module.0} garage.module.0.chunk.js, garage.module.0.chunk.js.map () 14.5 kB {main} [rendered]
    chunk {home.module.0} home.module.0.chunk.js, home.module.0.chunk.js.map () 13.8 kB {main} [rendered]
    chunk {inline} inline.bundle.js, inline.bundle.js.map (inline) 30.8 kB [entry] [rendered]
    chunk {lease-options.module.0} lease-options.module.0.chunk.js, lease-options.module.0.chunk.js.map () 35.6 kB {main} [rendered]
    chunk {main} main.bundle.js, main.f22425f08800b973e209.hot-update.js, main.bundle.js.map, main.f22425f08800b973e209.hot-update.js.map (main) 230 kB {vendor} [initial] [rendered]
    chunk {makes-page.module.0} makes-page.module.0.chunk.js, makes-page.module.0.chunk.js.map () 16.9 kB {main} [rendered]
    chunk {manage-cars.module.0} manage-cars.module.0.chunk.js, manage-cars.module.0.chunk.js.map () 7.83 kB {main} [rendered]
    chunk {manage-edmunds.module.0} manage-edmunds.module.0.chunk.js, manage-edmunds.module.0.chunk.js.map () 17.9 kB {main} [rendered]
    chunk {manage-fuel.module.0} manage-fuel.module.0.chunk.js, manage-fuel.module.0.chunk.js.map () 41 kB {main} [rendered]
    chunk {manage-users.module.0} manage-users.module.0.chunk.js, manage-users.module.0.chunk.js.map () 45 kB {main} [rendered]
    chunk {models.module.0} models.module.0.chunk.js, models.module.0.chunk.js.map () 161 kB {main} [rendered]
    chunk {polyfills} polyfills.bundle.js, polyfills.bundle.js.map (polyfills) 204 kB {inline} [initial]
    chunk {profile.module.0} profile.module.0.chunk.js, profile.module.0.chunk.js.map () 19.4 kB {main} [rendered]
    chunk {scripts} scripts.bundle.js, scripts.bundle.js.map (scripts) 700 kB {inline} [initial]
    chunk {search.module.0} search.module.0.chunk.js, search.module.0.chunk.js.map () 617 kB {main} [rendered]
    chunk {styles} styles.bundle.js, styles.bundle.js.map (styles) 387 kB {inline} [initial]
    chunk {styles.module.0} styles.module.0.chunk.js, styles.module.0.chunk.js.map () 32.7 kB {main} [rendered]
    chunk {vendor} vendor.bundle.js, vendor.bundle.js.map (vendor) 7.47 MB [initial]

    webpack: Compiled successfully.
    webpack: Compiling...
    Date: 2017-08-15T16:21:03.313Z
    Hash: 58a92fde8af93fa2196f
    Time: 1843ms
    chunk {about.module.1} about.module.1.chunk.js, about.module.1.chunk.js.map () 10.2 kB {main} [rendered]
    chunk {admin.module.1} admin.module.1.chunk.js, admin.module.1.chunk.js.map () 21.9 kB {main} [rendered]
    chunk {carbuilder.module.1} carbuilder.module.1.chunk.js, carbuilder.module.1.chunk.js.map () 56.9 kB {main} [rendered]
    chunk {checkout.module.1} checkout.module.1.chunk.js, checkout.module.1.chunk.js.map () 117 kB {main} [rendered]
    chunk {common} common.chunk.js, common.chunk.js.map (common) 79.8 kB {main}
    chunk {contact.module.1} contact.module.1.chunk.js, contact.module.1.chunk.js.map () 535 kB {main} [rendered]
    chunk {details.module.1} details.module.1.chunk.js, details.module.1.chunk.js.map () 44 kB {main} [rendered]
    chunk {garage.module.1} garage.module.1.chunk.js, garage.module.1.chunk.js.map () 14.5 kB {main} [rendered]
    chunk {home.module.1} home.module.1.chunk.js, home.module.1.chunk.js.map () 13.8 kB {main} [rendered]
    chunk {inline} inline.bundle.js, inline.bundle.js.map (inline) 30.8 kB [entry] [rendered]
    chunk {lease-options.module.1} lease-options.module.1.chunk.js, lease-options.module.1.chunk.js.map () 35.6 kB {main} [rendered]
    chunk {main} main.bundle.js, main.706aa17d2700ff62481f.hot-update.js, main.bundle.js.map, main.706aa17d2700ff62481f.hot-update.js.map (main) 230 kB {vendor} [initial] [rendered]
    chunk {makes-page.module.1} makes-page.module.1.chunk.js, makes-page.module.1.chunk.js.map () 16.9 kB {main} [rendered]
    chunk {manage-cars.module.1} manage-cars.module.1.chunk.js, manage-cars.module.1.chunk.js.map () 7.83 kB {main} [rendered]
    chunk {manage-edmunds.module.1} manage-edmunds.module.1.chunk.js, manage-edmunds.module.1.chunk.js.map () 17.9 kB {main} [rendered]
    chunk {manage-fuel.module.1} manage-fuel.module.1.chunk.js, manage-fuel.module.1.chunk.js.map () 41 kB {main} [rendered]
    chunk {manage-users.module.1} manage-users.module.1.chunk.js, manage-users.module.1.chunk.js.map () 45 kB {main} [rendered]
    chunk {models.module.1} models.module.1.chunk.js, models.module.1.chunk.js.map () 161 kB {main} [rendered]
    chunk {polyfills} polyfills.bundle.js, polyfills.bundle.js.map (polyfills) 204 kB {inline} [initial]
    chunk {profile.module.1} profile.module.1.chunk.js, profile.module.1.chunk.js.map () 19.4 kB {main} [rendered]
    chunk {scripts} scripts.bundle.js, scripts.bundle.js.map (scripts) 700 kB {inline} [initial]
    chunk {search.module.1} search.module.1.chunk.js, search.module.1.chunk.js.map () 617 kB {main} [rendered]
    chunk {styles} styles.bundle.js, styles.bundle.js.map (styles) 387 kB {inline} [initial]
    chunk {styles.module.1} styles.module.1.chunk.js, styles.module.1.chunk.js.map () 32.7 kB {main} [rendered]
    chunk {vendor} vendor.bundle.js, vendor.bundle.js.map (vendor) 7.47 MB [initial]

    webpack: Compiled successfully.
    webpack: Compiling...
    Date: 2017-08-15T16:22:13.165Z
    Hash: c1ba43f0e7d9007e7183
    Time: 2409ms
    chunk {about.module.2} about.module.2.chunk.js, about.module.2.chunk.js.map () 10.2 kB {main} [rendered]
    chunk {admin.module.2} admin.module.2.chunk.js, admin.module.2.chunk.js.map () 21.9 kB {main} [rendered]
    chunk {carbuilder.module.2} carbuilder.module.2.chunk.js, carbuilder.module.2.chunk.js.map () 56.9 kB {main} [rendered]
    chunk {checkout.module.2} checkout.module.2.chunk.js, checkout.module.2.chunk.js.map () 117 kB {main} [rendered]
    chunk {common} common.chunk.js, common.chunk.js.map (common) 79.8 kB {main}
    chunk {contact.module.2} contact.module.2.chunk.js, contact.module.2.chunk.js.map () 535 kB {main} [rendered]
    chunk {details.module.2} details.module.2.chunk.js, details.module.2.chunk.js.map () 44 kB {main} [rendered]
    chunk {garage.module.2} garage.module.2.chunk.js, garage.module.2.chunk.js.map () 14.5 kB {main} [rendered]
    chunk {home.module.2} home.module.2.chunk.js, home.module.2.chunk.js.map () 13.8 kB {main} [rendered]
    chunk {inline} inline.bundle.js, inline.bundle.js.map (inline) 30.8 kB [entry] [rendered]
    chunk {lease-options.module.2} lease-options.module.2.chunk.js, lease-options.module.2.chunk.js.map () 35.6 kB {main} [rendered]
    chunk {main} main.bundle.js, main.58a92fde8af93fa2196f.hot-update.js, main.bundle.js.map, main.58a92fde8af93fa2196f.hot-update.js.map (main) 230 kB {vendor} [initial] [rendered]
    chunk {makes-page.module.2} makes-page.module.2.chunk.js, makes-page.module.2.chunk.js.map () 16.9 kB {main} [rendered]
    chunk {manage-cars.module.2} manage-cars.module.2.chunk.js, manage-cars.module.2.chunk.js.map () 7.83 kB {main} [rendered]
    chunk {manage-edmunds.module.2} manage-edmunds.module.2.chunk.js, manage-edmunds.module.2.chunk.js.map () 17.9 kB {main} [rendered]
    chunk {manage-fuel.module.2} manage-fuel.module.2.chunk.js, manage-fuel.module.2.chunk.js.map () 41 kB {main} [rendered]
    chunk {manage-users.module.2} manage-users.module.2.chunk.js, manage-users.module.2.chunk.js.map () 45 kB {main} [rendered]
    chunk {models.module.2} models.module.2.chunk.js, models.module.2.chunk.js.map () 161 kB {main} [rendered]
    chunk {polyfills} polyfills.bundle.js, polyfills.bundle.js.map (polyfills) 204 kB {inline} [initial]
    chunk {profile.module.2} profile.module.2.chunk.js, profile.module.2.chunk.js.map () 19.4 kB {main} [rendered]
    chunk {scripts} scripts.bundle.js, scripts.bundle.js.map (scripts) 700 kB {inline} [initial]
    chunk {search.module.2} search.module.2.chunk.js, search.module.2.chunk.js.map () 617 kB {main} [rendered]
    chunk {styles} styles.bundle.js, styles.bundle.js.map (styles) 387 kB {inline} [initial]
    chunk {styles.module.2} styles.module.2.chunk.js, styles.module.2.chunk.js.map () 32.7 kB {main} [rendered]
    chunk {vendor} vendor.bundle.js, vendor.bundle.js.map (vendor) 7.47 MB [initial]

    webpack: Compiled successfully.


    I also see console outputs for HMR. what else can I do to fully take advantage of HMR?

    What I already tried:


    1. I disabled "safe write" form WebStorm.


    2. I deleted and reinstalled node_modules.

    Continue reading...

Compartilhe esta Página