⚠️ Local development bugs with HMR · Issue #59602 · angular/angular · GitHub
Skip to content

⚠️ Local development bugs with HMR #59602

Closed
Closed
⚠️ Local development bugs with HMR#59602
Labels
area: coreIssues related to the framework runtimecore: hot module replacement (HMR)
Milestone
needsTriage

Description

@dgp1130
dgp1130
opened on Jan 18, 2025

Which @angular/* package(s) are the source of the bug?

compiler-cli

Is this a regression?

Yes

Description

We're aware of reports of local development bugs arising from Angular template HMR in 19.1.x, which has been enabled by default.

List of known issues:

We're actively investigating and fixing these issues to create a smooth HMR experience out of the box. Production builds and releases are not affected. If you discover any additional HMR challenges which don't appear to be related to the linked issues above, verify that you are on a recent version (19.1.3+), and please file a new issue and link it here so we can triage and investigate.

Workarounds

In the meantime, if you encounter any problems relating to HMR, you can work around them in three ways:

  1. Refresh the page - This loads a fresh copy of your application with up to date code.
  2. ng serve --no-hmr - This disables HMR for your local devserver and automatically refreshes the page on any code changes.
  3. Disable HMR for your project - Configuring angular.json will disable HMR for all ng serve invocations by default.
    • This is useful for a project with a large number of developers without needing to communicate these workarounds to all contributors.
    • Remember to re-enable once the relevant issues are fixed!
{
  "projects": {
    "my-project": {
      "architect": {
        "serve": {
          "options": {
            "hmr": false
          }
        }
      }
    }
  }
}

Thank you for sharing any HMR issues and helping improve Angular one bugfix at a time. We're committed to fully stabilizing this feature and excited to bring improved build performance to everyone.

Activity

  1. dgp1130
    added
    core: hot module replacement (HMR)
    on Jan 18, 2025
  2. dgp1130
    pinned this issue on Jan 18, 2025
  3. AndrewKushnir
    added
    area: coreIssues related to the framework runtime
    on Jan 18, 2025
  4. ngbot
    added this to the needsTriage milestone on Jan 18, 2025

  5. YashrajDawkhar commented on Jan 19, 2025

    @YashrajDawkhar
    YashrajDawkhar
    on Jan 19, 2025

    When we are adding tailwind classes it is not getting reflected due to hmr .

  6. crisbeto commented on Jan 20, 2025

    @crisbeto
    crisbeto
    on Jan 20, 2025
    Member

    For anyone following along, we've released versions 19.1.2 of the framework and 19.1.3 of the CLI to resolve the outstanding HMR issues.

  7. bastibense commented on Jan 20, 2025

    @bastibense
    bastibense
    on Jan 20, 2025

    Thanks! Can confirm it's working now. 💯

  8. rabikr commented on Jan 20, 2025

    @rabikr
    rabikr
    on Jan 20, 2025

    I updated all my projects to use "@angular/core": "19.1.2" & "@angular/cli": "19.1.3". But now when I start the dev server using "ng serve" and visit the localhost:4200, the nodejs server crashes with the following error:

    `
    NOTE: Raw file sizes do not reflect development server per-request transformations.
    ➜ Local: http://localhost:4200/
    ➜ press h + enter to show help
    node:internal/process/promises:394
    triggerUncaughtException(err, true /* fromPromise */);
    ^

    Error: [vite] cannot find entry point module 'file:///D:/<PROJECT_FOLDER>/.angular/vite-root/spa-near-me/@ng/component?c=src%2Fapp%2Fcomponents%2Fheader%2Fheader.component.ts%40HeaderComponent&t=1737401566323'.
    at fetchModule (file:///D:/<PROJECT_FOLDER>/node_modules/@angular/build/node_modules/vite/dist/node/chunks/dep-BJP6rrE_.js:51477:13)
    at async handleInvoke (file:///D:/<PROJECT_FOLDER>/node_modules/@angular/build/node_modules/vite/dist/node/chunks/dep-BJP6rrE_.js:44166:22)
    at async EventEmitter.listenerForInvokeHandler (file:///D:/<PROJECT_FOLDER>/node_modules/@angular/build/node_modules/vite/dist/node/chunks/dep-BJP6rrE_.js:44239:19) {`

    All my projects are using tailwind CSS and I've also enabled provideExperimentalZonelessChangeDetection() .

    This problem goes away if I use ng serve --no-hmr.

    Here are my dependencies
    "dependencies": { "@angular/animations": "^19.1.2", "@angular/common": "^19.1.2", "@angular/compiler": "^19.1.2", "@angular/core": "^19.1.2", "@angular/forms": "^19.1.2", "@angular/platform-browser": "^19.1.2", "@angular/platform-browser-dynamic": "^19.1.2", "@angular/platform-server": "^19.1.2", "@angular/router": "^19.1.2", "@angular/ssr": "^19.1.3", "express": "^4.18.2", "rxjs": "~7.8.0", "tslib": "^2.3.0", "zone.js": "~0.15.0" }, "devDependencies": { "@angular-devkit/build-angular": "^19.1.3", "@angular/cli": "^19.1.3", "@angular/compiler-cli": "^19.1.2", "@types/express": "^4.17.17", "@types/jasmine": "~5.1.0", "@types/node": "^18.18.0", "autoprefixer": "^10.4.20", "daisyui": "^4.12.23", "jasmine-core": "~5.5.0", "karma": "~6.4.0", "karma-chrome-launcher": "~3.2.0", "karma-coverage": "~2.2.0", "karma-jasmine": "~5.1.0", "karma-jasmine-html-reporter": "~2.1.0", "lucide-angular": "^0.473.0", "postcss": "^8.5.1", "prettier": "^3.4.2", "tailwindcss": "^3.4.17", "typescript": "~5.7.2", "xmlbuilder": "^15.1.1" }

  9. DaSchTour commented on Jan 21, 2025

    @DaSchTour
    DaSchTour
    on Jan 21, 2025

    I had issues with i18n and $localize which is probably caused by having the project in NX and spread out to several libraries.
    So I get errors that $localize is not defined when templates with i18n are reloaded I guess.

  10. crisbeto commented on Jan 21, 2025

    @crisbeto
    crisbeto
    on Jan 21, 2025
    Member

    There was a fix in the CLI version 19.1.3 that reloads the page in the presence of $localize, although I'm not sure if it made its way to Nx.

  11. clydin commented on Jan 22, 2025

    @clydin
    clydin
    on Jan 22, 2025
    Member

    We've released versions 19.1.3 of the framework and 19.1.4 of the CLI which resolve the outstanding HMR issues.
    If you were encountering issues previously, please consider updating and let us know if you encounter any HMR or reload related problems.

  12. rabikr commented on Jan 22, 2025

    @rabikr
    rabikr
    on Jan 22, 2025

    I have updated to the latest ng core/cli and can confirm all the errors, warning messages are all gone now. I can run Angular projects locally without using --no-hmr flag now.
    Amazing support from Angular team as always! 👏👏

  13. YashrajDawkhar commented on Jan 23, 2025

    @YashrajDawkhar
    YashrajDawkhar
    on Jan 23, 2025

    We've released versions 19.1.3 of the framework and 19.1.4 of the CLI which resolve the outstanding HMR issues. If you were encountering issues previously, please consider updating and let us know if you encounter any HMR or reload related problems.

    Issue Description:
    After updating, terminal errors are no longer present.
    When copying and pasting Tailwind code, the code appears in the DOM but does not update or fix its position in the UI, even after refreshing.
    If an "Enter" key is pressed after the pasted code (e.g., by adding a new line), the styles are applied correctly.

    Bug.-.HMR.mp4

  14. kunjgit commented on Jan 23, 2025

    @kunjgit
    kunjgit
    on Jan 23, 2025

    We've released versions 19.1.3 of the framework and 19.1.4 of the CLI which resolve the outstanding HMR issues. If you were encountering issues previously, please consider updating and let us know if you encounter any HMR or reload related problems.

    @clydin I have updated both @angular/core and @angular/cli to 19.1.3 and 19.1.4 respectively but still having HMR issue !
    When I am creating new project after this release it's not having any issue but older project is still having issue even after updating both packages !

  15. clydin commented on Jan 23, 2025

    @clydin
    clydin
    on Jan 23, 2025
    Member

    @YashrajDawkhar During a rebuild, Tailwind may internally change other aspects of the application even though a developer may have only made changes to a template. This typically occurs when new Tailwind classes are added to a template and currently requires a full page reload. More advanced Tailwind support is being investigated including built-in support for the recently released Tailwind v4.

    @kunjgit Please ensure that all Angular packages have been updated. If you are still encountering problems, please open a separate issue with details of the problem as well as the output of ng version and a minimal reproduction, if possible.

  16. 14 remaining items

  17. dzcora commented on Feb 20, 2025

    @dzcora
    dzcora
    on Feb 20, 2025

    @dzcora The Angular team does not directly support nx build tooling. However, if you open a separate issue with a minimal reproduction, we can attempt to troubleshoot the problem.

    @clydin Our project is huge, and it's too complex to reproduce it.
    Actually, even when I build the project with your builders and without NX executors, it's still not working.

  18. TimUnderhay commented on Feb 24, 2025

    @TimUnderhay
    TimUnderhay
    on Feb 24, 2025

    I am on core 19.1.7 / cli 19.1.8 -- template HMR is not working at all. No errors thrown. Template changes simply don't get reflected. I had to disable HMR entirely to reload on template changes.

    I do see the update event coming through the dev websocket, though. Just nothing happens in the DOM.

    Image

  19. crisbeto commented on Feb 24, 2025

    @crisbeto
    crisbeto
    on Feb 24, 2025
    Member

    @TimUnderhay have you noticed if it happens on specific kinds of components? We can't really investigate without more information.

  20. TimUnderhay commented on Feb 24, 2025

    @TimUnderhay
    TimUnderhay
    on Feb 24, 2025

    @TimUnderhay have you noticed if it happens on specific kinds of components? We can't really investigate without more information.

    @crisbeto I'm working on a reproduction for you. I can say that my project is quite simple.

  21. TimUnderhay commented on Feb 24, 2025

    @TimUnderhay
    TimUnderhay
    on Feb 24, 2025

    @crisbeto Problem located / solved. My Angular app is part of a monorepo in which source code is referenced from other shared locations within the monorepo via compilerOptions.paths in tsconfig.json. These other shared locations live one directory up from the ng app. To support this, I'd added "rootDir": "../" to tsconfig.json.

    Removing rootDir fixes it. As it transpires, rootDir wasn't needed at all, as it's working perfectly fine without it.

    It may be worth noting that "rootDir": ".." seems to break nothing else -- styles HMR works and reload on component save works. It's just template HMR that's affected, so there may be a wee bug in there, but admittedly it's likely an edge case.

    {
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "rootDir": "../",
    "outDir": "./dist/out-tsc",
    "strict": true,
    "noImplicitOverride": true,
    "noPropertyAccessFromIndexSignature": true,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true,
    "skipLibCheck": true,
    "isolatedModules": true,
    "esModuleInterop": true,
    "experimentalDecorators": true,
    "moduleResolution": "bundler",
    "importHelpers": true,
    "target": "ES2022",
    "module": "ES2022",
    "resolveJsonModule": true,
    "paths": {
       ":shared/*": ["../shared/src/*"]
    }
  },
  "angularCompilerOptions": {
    "enableI18nLegacyMessageIdFormat": false,
    "strictInjectionParameters": true,
    "strictInputAccessModifiers": true,
    "strictTemplates": true
  }
}
  22. AndrewKushnir
    unpinned this issue on Feb 24, 2025

  23. dzcora commented on Feb 25, 2025

    @dzcora
    dzcora
    on Feb 25, 2025

    @clydin @crisbeto I can confirm that in new Angular project when adding statsJson:true to the build options in angular.json the HMR is not working.
    What is the reason for that?

  24. crisbeto commented on Feb 26, 2025

    @crisbeto
    crisbeto
    on Feb 26, 2025
    Member

    The issue with the statsJson will be fixed by angular/angular-cli#29707.

  25. alan-agius4 commented on Mar 26, 2025

    @alan-agius4
    alan-agius4
    on Mar 26, 2025
    Contributor

    All known problems have been addressed as of 19.2.0.

    If you encounter any new issues with component HMR, please open a separate issue and include a minimal reproduction if possible.

  26. alan-agius4
    closed this as completedon Mar 26, 2025

  27. roma2341 commented on Mar 31, 2025

    @roma2341
    roma2341
    on Mar 31, 2025

    In my case HMR doesn't work at all, i tried to enable it, but it still reload page after each change in styles and templates

  28. dzcora commented on Apr 23, 2025

    @dzcora
    dzcora
    on Apr 23, 2025

    In my case HMR doesn't work at all, i tried to enable it, but it still reload page after each change in styles and templates

    Same.

    Same

  29. anhallbe commented on May 20, 2025

    @anhallbe
    anhallbe
    on May 20, 2025

    In my case HMR doesn't work at all, i tried to enable it, but it still reload page after each change in styles and templates

    Same here. I get the "Component HMR has been enabled" warning, so I think it's enabled. But any changes to components, templates, or styles always causes a browser refresh. ng serve --verbose doesn't say anything of interest, is there some way to enable more verbose logging?

         _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/
    

Angular CLI: 19.2.8
Node: 22.15.1
Package Manager: npm 11.4.0
OS: darwin arm64

Angular: 19.2.7
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1902.8
@angular-devkit/build-angular   19.2.8
@angular-devkit/core            19.2.8
@angular-devkit/schematics      19.2.8
@angular/cdk                    19.2.10
@angular/cli                    19.2.8
@schematics/angular             19.2.8
ng-packagr                      19.1.0
rxjs                            7.8.1
typescript                      5.7.3
zone.js                         0.15.0

    Update: Seems like "aot": false is the reason. angular/angular-cli#30352

  30. angular-automatic-lock-bot commented on Jun 21, 2025

    @angular-automatic-lock-bot
    angular-automatic-lock-botBot
    on Jun 21, 2025

    This issue has been automatically locked due to inactivity.
    Please file a new issue if you are encountering a similar or related problem.

    Read more about our automatic conversation locking policy.

    This action has been performed automatically by a bot.

  31. angular-automatic-lock-bot
    locked and limited conversation to collaborators on Jun 21, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    area: coreIssues related to the framework runtimecore: hot module replacement (HMR)

    Type

    No type

    Projects

    No projects

      Milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions