DEV Community

Paweł Fraś
Paweł Fraś

Posted on • Updated on

Angular 17: Overcoming SSR Challenges Of The New 'application' Builder 🔎

The new Angular builder introduced in version 17, named application, consolidates separate builders for CRS, SSR, and SSG into a single entity. This becomes the default choice when creating a new application.

Unfortunately, for applications with SSR, changes to the server.ts file, which contains the server implementation, are not reflected when running ng serve. This is cumbersome if you have some custom providers for your application specific for the server side. The same when comes to custom logic that depends on the request/response. In developer mode, these changes simply won't work.

As a workaround, you can run watch script for re-building your app on changes made in code and in the separate terminal, serve server.mjs file with flag --watch to be eager to changes in dist folder. It can be achievable by small adjustment in package.json:

"watch": "ng build --watch --configuration=development",
- "serve:ssr:<your-app-name>": "node dist/<your-app-name>/server/server.mjs"
+ "serve:ssr:<your-app-name>": "node --watch dist/<your-app-name>/server/server.mjs"
Enter fullscreen mode Exit fullscreen mode

You can try this suggestion or switch back to previous builders: browser, server and ssr-dev-server - they are still supported, but by choosing them you'll lost advantages of esbuild .

There is a GitHub issue in Angular-CLI repository describing mentioned issue. Don't hesitate to share your thoughts and leave there 👍 reaction - let Angular Core team know about our struggles :)

Top comments (0)