fix(material/sidenav): enable hydration #28340
Conversation
crisbeto
added
P2
crisbeto
requested review from
devversion,
josephperrott and
mmalerba
as code owners
angular-robot
bot
added
the
area: build & ci
crisbeto
force-pushed
the
27848/sidenav-hydration
branch
2 times, most recently
from
528b7d9 to
04bba37
Compare
Updates to the latest version of Angular which includes angular/angular#53246. It is necessary to get hydration working for the sidenav.
Fixes that the sidenav was disabling hydration. This is problematic, because it essentially disables hydration for the entire app that is using the sidenav. The hydration errors had a couple of root causes: 1. Focus trap anchors throw off hydration. 2. We were moving the end sidenav manually so the visual order matches the DOM order for accessibility. Now this happens only on the client. Fixes angular#27848.
crisbeto
force-pushed
the
27848/sidenav-hydration
branch
from
04bba37 to
2f187bf
Compare
| </mat-sidenav> | ||
| Main content | ||
| <button (click)="sidenav.toggle()">Click me</button> | ||
| <button (click)="startSidenav.toggle()">Toggle start</button> | ||
| <button (click)="endSidenav.toggle()">Toggle end</button> | ||
| </mat-sidenav-container> | ||
|
|
||
| <h2>Slide-toggle</h2> |
There was a problem hiding this comment.
BTW: One thing I did play with in the past was to use Pupeteer and capture a screenshot of the SSR structure to ensure the initial "boilerplate" looks as expected. I wonder, do we also bother about this with these PRs or are we just ensuring no errors?
There was a problem hiding this comment.
We're just ensuring that there's no errors, but hydration errors actually aren't captured on the CI yet. Eventually it would be nice to add something (potentially Puppeteer or Webdriver) that opens the client-side-rendered page and checks that there are no JS errors.
crisbeto
removed request for
josephperrott,
mmalerba,
andrewseguin and
wagnermaciel
crisbeto
added
action: merge
|
This issue has been automatically locked due to inactivity. Read more about our automatic conversation locking policy. This action has been performed automatically by a bot. |
Fixes that the sidenav was disabling hydration. This is problematic, because it essentially disables hydration for the entire app that is using the sidenav. The hydration errors had a couple of root causes:
Fixes #27848.