QueryParams/ParamMap Always Comes Back Empty

Question

I'm trying to get a parameter serverId from the URL using the following setup:

    constructor(private peopleService: PeopleService, private route: ActivatedRoute) {
        this.route.paramMap.subscribe(params => {
            console.log(params); //params is empty here
             //...

Here's my setup in app.module.ts:

@NgModule({
    declarations: [AppComponent],
    imports: [BrowserModule, HttpClientModule, RouterModule.forRoot([])],
    providers: [],
    bootstrap: [AppComponent],
})

I've also tried using queryParams instead of paramMap, any method I've seen results in an empty parameter list so I'm assuming there's something wrong with my setup.

Is there something else I need to do to set this up? I'm providing the parameter correctly in the url as url?serverId=123.

Not very easily, would I just be putting the entire app into it? — muttley91, Jan 03 '21 at 06:39
I mean if you are able to reproduce th e problem that would be nice. could you also tell us which version of angular and angular/router you are using — JSmith, Jan 03 '21 at 06:42

Arash Hatami · Answer 1 · 2021-01-03T06:42:34.540

0

If your routing Module is like this:

{
 path: 'url/:serverId ',
 component:MyComponent
}

so ,I guess that component is loaded before the actual routing applied. Please Add { enableTracing: true } to the RouterModule to see what is happening behind the scene.

RouterModule.forRoot([], { enableTracing: true })

then you can subscribe queryParams :

// ...
import { ActivatedRoute } from '@angular/router';
import 'rxjs/add/operator/filter';

@Component({ ... })
export class ProductComponent implements OnInit {
  serverId: string;
  constructor(private route: ActivatedRoute) { }

  ngOnInit() {
    this.route.queryParams
      .filter(params => params.serverId)
      .subscribe(params => {
        console.log(params); // { serverId: "123" }

        this.serverId= params.serverId;
        console.log(this.serverId); // 123
      }
    );
  }
}

edited Jan 03 '21 at 06:42

answered Jan 03 '21 at 06:11

Arash Hatami

522
4
10

you just copy pasted [a whole post here ] (https://stackoverflow.com/questions/55295469/why-queryparams-are-empty) please quote – JSmith Jan 03 '21 at 06:16
where would I see the tracing? – muttley91 Jan 03 '21 at 06:18
@muttley91 every where you subscribe queryParams . – Arash Hatami Jan 03 '21 at 06:20
@muttley91 was it useful ? – Arash Hatami Jan 03 '21 at 06:38
No I don't understand how to see the result of the trace. – muttley91 Jan 03 '21 at 06:39
that's pretty much exactly what I have except for the filter – muttley91 Jan 03 '21 at 06:45
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/226763/discussion-between-arash-hatami-and-muttley91). – Arash Hatami Jan 03 '21 at 06:47

score 0 · Answer 2 · answered Jan 03 '21 at 07:19

I found the issue. I had my app-routing-module.ts set up as follows:

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

const routes: Routes = [];

@NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule]
})
export class AppRoutingModule { }

which means that the imports in my app.module.ts should have read as follows:

imports: [BrowserModule, HttpClientModule, AppRoutingModule]

QueryParams/ParamMap Always Comes Back Empty

2 Answers2