I created an app called dummyapp using Angular CLI version 19.2.5 with the --ssr option (ng new dummyapp --ssr).

In the appponent.ts, I'm trying to retrieve the title from the query string. Here's the code I added:

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, RouterOutlet } from '@angular/router';

@Component({
  selector: 'app-root',
  imports: [RouterOutlet],
  templateUrl: './appponent.html',
  styleUrl: './appponent.scss'
})
export class AppComponent implements OnInit {
  title = 'dummyapp';

/**
 *
 */
constructor(
  private route: ActivatedRoute
) {}

  ngOnInit(): void {
    this.route.queryParams.subscribe(async params => {
     this.title = params['title'];
    });
  }
}

In the browser, I disabled JavaScript to test server-side rendering.

When I run the app using ng serve and navigate to http://localhost:4200/?title=MyTitle, it works — I'm able to display the title passed in the query string.

However, the issue occurs when I don't use ng serve.

Again, I disable JavaScript in the browser to test SSR. Then I run: ng build && yarn serve:ssr:dummyapp

I navigate to: http://localhost:4000/?title=MyTitle

And this time, it doesn't work — the title from the query string is not retrieved.

Is there something different in how Angular handles query parameters in SSR mode vs dev mode (ng serve)? Is there a recommended way to retrieve query params on the server side with Angular 19?

Thanks!

I created an app called dummyapp using Angular CLI version 19.2.5 with the --ssr option (ng new dummyapp --ssr).

In the appponent.ts, I'm trying to retrieve the title from the query string. Here's the code I added:

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, RouterOutlet } from '@angular/router';

@Component({
  selector: 'app-root',
  imports: [RouterOutlet],
  templateUrl: './appponent.html',
  styleUrl: './appponent.scss'
})
export class AppComponent implements OnInit {
  title = 'dummyapp';

/**
 *
 */
constructor(
  private route: ActivatedRoute
) {}

  ngOnInit(): void {
    this.route.queryParams.subscribe(async params => {
     this.title = params['title'];
    });
  }
}

In the browser, I disabled JavaScript to test server-side rendering.

When I run the app using ng serve and navigate to http://localhost:4200/?title=MyTitle, it works — I'm able to display the title passed in the query string.

However, the issue occurs when I don't use ng serve.

Again, I disable JavaScript in the browser to test SSR. Then I run: ng build && yarn serve:ssr:dummyapp

I navigate to: http://localhost:4000/?title=MyTitle

And this time, it doesn't work — the title from the query string is not retrieved.

Is there something different in how Angular handles query parameters in SSR mode vs dev mode (ng serve)? Is there a recommended way to retrieve query params on the server side with Angular 19?

Thanks!

• angular
• query-string
• server-side-rendering

• please share main.ts,main.server.ts, app.config.ts, app.config.server.ts – Naren Murali Commented Mar 27 at 5:07
• The application can be accessed here: easyupload.io/33xst8 It was generated using the Angular CLI, with some modifications made to the appponent.ts file. – Sylvain Michaud Commented Mar 27 at 12:07
• Please provide enough code so others can better understand or reproduce the problem. – Community Bot Commented Mar 31 at 2:53

2 Answers 2

If you are using Angular 19, I recommend you to take the query params with input.require(). The name of the attribute must be equal to the name of the params in the url, and you can inject the service with the inject method instead of doing it in the constructor.

I asked the Angular Team about this. You can find their response here: https://github/angular/angular-cli/issues/29967.

This behavior is expected because the page is being prerendered when running ng build && yarn serve:ssr:dummyapp. To disable prerendering, set "prerender": false in your angular.json.