Stylesheet is not found after UI.navigate to AppLayout in production mode

Description of the bug

The stylesheet is not loaded properly on UI.navigate for vaadin-app-layout in production mode. Not occurring in dev mode. See: https://github.com/appreciated/vaadin-app-layout/issues/297, also https://github.com/appreciated/vaadin-app-layout/issues/306 and https://github.com/vaadin/flow-spring-examples/issues/53

Minimal reproducible example

Navigate with UI.navigate to an AppLayout view, e.g. from a login screen.

Expected behavior

Correctly loaded stylesheet.

Actual behavior

Server can not find stylesheet, resulting in missing style until page reload.

Workaround

Replace UI.navigate(...) with UI.getCurrent().getPage().setLocation(...) (suggested in https://github.com/appreciated/vaadin-app-layout/issues/297)

Tested versions:

- Vaadin / Flow version: 14.2.0.beta1 / 2.2 (also tested with latest 14.1.x versions)
- Java version: OpenJDK-11
- OS version: Windows10 (1909) and Debian 10 (Buster)
- Browser version: Vivaldi (3.0.1874.32) based on Chromium (81.0.4044.123)
- IDE: IntelliJ 2020.1.1

[denis-anisimov]

Sorry, for this specific issue after spending several days I was able to reproduce it.

One more time : thanks to @rolandoisidoro who helped with this.

[denis-anisimov]

Use @Stylesheet with relative path or explicit frontend:// schema. Make a route view which navigates via UI.navigate to the view above (with @Stylesheet).

It works fine in dev mode, it doesn’t work in production mode. If you load view with @Stylesheet directly (without programatic navigation) then it works fine. It’s necessary to use UI.navigate.

This is a consequence of applying URI resolution on the client side which uses compatibility mode URLs . Compatibility mode URLs should not be sent to the client side if app is running without compatibility mode.