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

platform-server

Is this a regression?

Yes

Description

Description:

I have an older Angular application that I’ve kept updated to the latest Angular versions. Recently, I encountered an issue related to server-side rendering (SSR) when updating my server configuration.

Problem
Before the introduction of provideServerRendering(), I used the following providers in my app's server configuration file for SSR:

providers: [
  provideAnimationsAsync("noop"),
  importProvidersFrom(
    ServerModule
  )
]

With the introduction of provideServerRendering() in recent versions, I updated my providers array to include provideServerRendering(), following the new SSR support practices. However, the SSR documentation currently doesn’t provide any details about provideServerRendering().

My updated configuration looked like this:

providers: [
  provideServerRendering(),
  provideAnimationsAsync("noop"),
  importProvidersFrom(
    ServerModule
  )
]

After making this update, I noticed that Angular SSR was adding two <script id="app-state" type="application/json"> tags to the HTML returned from the server:

<script id="app-state" type="application/json">...</script>
<script id="app-state" type="application/json">...</script>

Investigation
After some debugging, I discovered that the duplication was due to both provideServerRendering() and importProvidersFrom(ServerModule) setting up the same SSR-related providers.

In reviewing the Angular source code, I found that provideServerRendering() internally imports several providers, including:

• provideNoopAnimations(), whereas my configuration used provideAnimationsAsync("noop")
• TRANSFER_STATE_SERIALIZATION_PROVIDERS
• SERVER_RENDER_PROVIDERS
• SERVER_HTTP_PROVIDERS

Source links:

provideServerRendering() implementation
Additional server providers

Solution
To resolve the issue, I removed importProvidersFrom(ServerModule) from my providers array:

providers: [
  provideServerRendering()
]

This change resolved the duplication issue, and only one <script id="app-state" type="application/json"> tag was rendered.

Suggested Improvement
It would be beneficial if Angular handled duplicate SSR providers more gracefully, perhaps by:

• Making subsequent instances of the same server-related provider a noop, or
• Displaying a warning to notify developers about potential duplication issues, enhancing the developer experience.

Additionally, an updated SSR guide would be extremely helpful. A guide that explains how provideServerRendering() works behind the scenes, detailing what it imports and how it should be used in conjunction with (or in place of) ServerModule, would clear up any confusion around required SSR configurations.

Thanks for considering this request to improve SSR configuration clarity and developer experience!

Please provide a link to a minimal reproduction of the bug

No response

Please provide the exception or error you saw

I noticed that Angular SSR was adding two <script id="app-state" type="application/json"> tags to the HTML returned from the server:

<script id="app-state" type="application/json">...</script>
<script id="app-state" type="application/json">...</script>

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

Angular CLI: 19.0.0-rc.0
Node: 20.12.2
Package Manager: npm 10.6.0
OS: win32 x64

Angular: 19.0.0-rc.0
... animations, cdk, cli, common, compiler, compiler-cli, core
... forms, google-maps, material, platform-browser
... platform-browser-dynamic, platform-server, pwa, router
... service-worker, ssr

Package Version

@angular-devkit/architect 0.1900.0-rc.0
@angular-devkit/build-angular 19.0.0-rc.0
@angular-devkit/core 19.0.0-rc.0
@angular-devkit/schematics 19.0.0-rc.0
@angular/fire 18.0.1
@schematics/angular 19.0.0-rc.0
rxjs 7.8.1
typescript 5.6.3
zone.js 0.15.0

Anything else?

No response