Angular6: Why is `ActivatedRoute.snapshot.queryParams` empty when the url clearly shows correct value?

from one page, I call:

// call this to nav to '/list' with queryParams 
const data = {'map-center': this.loc.join(',')};
this.router.navigate(['/list'], {queryParams:data} );

which produces the correct navigation event with this url:

http://localhost:8100/list?map-center=13.7414025,100.51102500000002

but in the target page, queryParam is empty in both cases:

// <ion-router-outlet main
//      (activate)="!!$event.viewWillEnter ? $event.viewWillEnter() : undefined"

viewWillEnter(){
    // using constructor(){ private route: ActivatedRoute }
    const mapCenter = this.route.snapshot.queryParams['map-center'];
    this.route.queryParams.subscribe(p=>console.log(">>> queryParams=", p))
}

however, queryParam is fine when I reload from the browser. what's happening?

[update] if I add a param to the url, queryParams works fine.

this.router.navigate(['/list',{a:1}], {queryParams:data} );
// http://localhost:8100/list;a=1?map-center=13.7414025,100.51102500000002