@angular/ssr - how to handle responsiveness

[zygarios]

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

core

Is this a regression?

Yes

Description

With the new version of Angular and its migration to @angular/ssr, using 'ng serve' is not based on an Express server. How can I locally work on a project, including hydration, when some components are displayed only for mobile devices and others only for desktop? Previously, I could do this by passing the user-agent to the ngx-device-detector library and obtaining information about the user's device. Unfortunately, currently on localhost I do not have the ability to check what device it is because the REQUEST and RESPONSE have a value of null. As a result, it is difficult to work on the project. How can I deal with this?

`

@if (!isMobile) {

}
@if (isMobile) {

}

`

Currently, on the server side, the isMobile variable will always assume a hardcoded value, e.g. true, until it receives the correct value on the browser side. This causes incompatibility, e.g. in hydration, because the DOM layout on the browser will be different from the server.

Please provide a link to a minimal reproduction of the bug

No response

Please provide the exception or error you saw

No response

Please provide the environment you discovered this bug in (run ng version)

Angular CLI: 17.0.0

Anything else?

No response

[alan-agius4]

Duplicate of #26323

Worth mentioning that in some of cases relying on user-agent sniffing is a bad idea see:

• https://developer.mozilla.org/en-US/docs/Web/HTTP/Browser_detection_using_the_user_agent
• https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/User-Agent

[zygarios]

Ok, but i dont know any other solution to handle it on server...

[ghost]

🥰🥰

[angular-automatic-lock-bot]

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.}