angular url parameter fails to fetch without url ending in #

Question

I have an angular app and trying to get url parameters. The router config is like below

export const appRoutes: Routes = [
  { path: '', component: SharepointMainComponent  },
  { path: 'userProfile' ,component: UserDataComponent, canActivate : [MsalGuard]},
  { path: '**', component: ErrorComponent }
];

and the SharepointMainComponent constructor is like below

constructor(private activatedRoute: ActivatedRoute,) {
    //get optyNumber from url
    this.activatedRoute.queryParams.subscribe(params => {
      let optyNumber = params['optyNumber'];
      console.log("optyNumber:" + optyNumber); 
    });
}

If i type the url http://myserver.com?optyNumber=1234

then i get the value undefined. However, if i type http://myserver.com/#/?optyNumber=1234

then it prints the value just fine. What do i need to do to make it work with using the /#/