Javascriptservices: HMR broken using Angular 2.4
Create a new Angular project with the experimental patch (v0.8.1). The app runs fine the first time but if you update a file (say home.component.html) the browser goes blank and you see a bunch of errors in the console:
EXCEPTION: Error in :0:0 caused by: The selector "app" did not match any elements
ManuelDeLeon
All 8 comments
Did you rename the root component from <app>?
Check your Views/Home/index.cshtml, and also what your app.component.ts selector is.
Wasn't able to reproduce this one locally.
MarkPieszak
on 3 Feb 2017
Nope.
This generator can also be run with: yo aspnetcore-spa
_-----_ ╭──────────────────────────╮
| | │ Welcome to the ASP.NET │
|--(o)--| │ Core Single-Page App │
`---------´ │ generator! │
( _´U`_ ) │ │
/___A___\ /│ Version: 0.8.1 │
| ~ | ╰──────────────────────────╯
__'.___.'__
´ ` |° ´ Y `
? Framework Angular 2.4.5 (experimental)
? What type of project do you want to create? project.json (compatible with .NET Core tooling preview 2 and Visual Studio 20
15)
? Do you want to include unit tests? Yes
Ran: cross-env ASPNETCORE_ENVIRONMENT=Development dotnet run
Then changed home.component.html header to: <h1>Hello, world! XXX</h1>
Save => blank screen with error.
ManuelDeLeon
on 3 Feb 2017
When HMR updates modules, it detaches and reattaches changed components. DomRenderer.prototype.detachView removes all component elements which have parentNode defined (for app element it will be body element). As a temporary bypass I use
ngOnDestroy(): void {
document.body.appendChild(document.createElement("app"));
}
nikitadmitry
on 4 Feb 2017
I also am seeing this. Thank you @nikitadmitry - I added that line in the ctor of app.component and this has helped resolve the issue for me also.
I also have not changed the default name app as the selector.
btmadison
on 6 Feb 2017
@nikitadmitry Thank you for the interim fix - I'm back in business over here as well
chrisjmccrum
on 6 Feb 2017
For me HMR broke with angular 2.4.6.
We reverted back to 2.4.5 and it works.
hheexx
on 6 Feb 2017
Thanks for the report. I've published generator-aspnetcore-spa 0.8.2 which pins to Angular 2.4.5. I'll look at relaxing this versioning restriction when I get a chance to investigate the issue with 2.4.6.
SteveSandersonMS
on 7 Feb 2017
The template is now updated to support HMR with newer Angular 2.x (tested with 2.4.7).
SteveSandersonMS
on 9 Feb 2017
Related issues
justinyoo
·
3Comments
docrinehart
·
4Comments
uNkNowN92-git
·
3Comments
natemcmaster
·
4Comments
Eilon
·
3Comments
Most helpful comment
When HMR updates modules, it detaches and reattaches changed components. DomRenderer.prototype.detachView removes all component elements which have parentNode defined (for app element it will be body element). As a temporary bypass I use
ngOnDestroy(): void { document.body.appendChild(document.createElement("app")); }