HMR injects duplicate angular markup into the page

[stevetayloruk]

When modifing a file, such as a .ts or .css file, for example:

this.currentCount++;
to
this.currentCount = this.currentCount + 2 ;

Then the component gets rendered twice in the page like so:

I'm using the latest yeoman project but not the experimental angular option.

thanks

[SteveSandersonMS]

Sorry about that. It was a mismatch between the logic needed for Angular 2.0.2 and 2.4.5+.

To fix it, edit your boot-client.ts file, and just delete the following lines:

    // Before restarting the app, we create a new root element and dispose the old one
    const oldRootElem = document.querySelector(rootElemTagName);
    const newRootElem = document.createElement(rootElemTagName);
    oldRootElem.parentNode.insertBefore(newRootElem, oldRootElem);

Leave the following one (that calls platform.destroy();) in place, as that's all that's needed on Angular 2.0.2.

This will no longer be an issue, as we've removed the option to produce projects with older versions of Angular (the Angular template now only produces 2.4.5+ projects), hence closing this.

[kkalitowski]

Would you expect this to still be a problem with Microsoft.AspNetCore.SpaTemplates 0.9.3 that was using Angular 4? I'm still seeing the issue at that point (May'ish) and am wondering if the advice above is still the recommendation for that version.

[SteveSandersonMS]

@kkalitowski Yes, nothing's changed about that yet as far as I know.

[kkalitowski]

@SteveSanderson Gotcha. And that manual fix does work. I was referring to your Feb 13 note saying there should no longer be an issue. On a positive note, TrilonIO/aspnetcore-angular-universal@a83a6a9 was merged yesterday which fixes the issue.

[irejwanul]

Angular 4.4.5, nothing improved yet. The solution of @SteveSanderson is working.