Routing Issue in angular 8 with Hashing #

Question

this is login page where I am accessing the paramValue and setting in the localstorage in response

constructor(private router: Router, private apiService: AuthService, private globalService: GlobalService,
    private activatedRoute: ActivatedRoute) { }

  ngOnInit() {
    this.counterId = this.activatedRoute.snapshot.queryParamMap.get('counterId');
    this.subService = this.activatedRoute.snapshot.queryParamMap.get('changeService');
    this.linkData = this.activatedRoute.snapshot.queryParamMap.get('linkToken');
    this.deptType = this.activatedRoute.snapshot.queryParamMap.get('serviceType');
    this.pushBackData = this.activatedRoute.snapshot.queryParamMap.get('pushBack');
    console.log(this.counterId, this.deptType);
  }
  login() {
    const loginPayload = {
      'username': this.username,
      'password': this.password
    }
    this.apiService.login(loginPayload).subscribe(
      response => {
        if (response.code === 0) {
          localStorage.setItem('counterId', this.counterId);
          this.token = localStorage.getItem('access_token');
          localStorage.setItem('access_token', this.token);
          localStorage.setItem('changeService', this.subService);
          localStorage.setItem('linkToken', this.linkData);
          localStorage.setItem('serviceType', this.deptType);
          localStorage.setItem('pushBack', this.pushBackData);
          localStorage.setItem('username', this.username);

          if (this.deptType === 'C') {
            this.router.navigate(['Affinity/clinic']);
          } else if (this.deptType === 'P') {
            this.router.navigate(['Affinity/pharamacy']);
          } else if (this.deptType === 'F') {
            this.router.navigate(['Feedback/tokenList']);
          }
        } else {
          this.invalidLogin = true;
          Swal.fire({
            position: 'center',
            icon: 'error',
            title: 'Invalid Credentials',
            showConfirmButton: false,
            timer: 1500
          });
        }
      },

this is another component where it will access the local storage. with respect to this it will display the dom element in view

constructor(private tokenWebsocket: TokenWebsocketService, private tokenDispenserService: TokenDispenserService,
    private globalService: GlobalService, private router: Router, private activatedRoute: ActivatedRoute,
    private formBuilder: FormBuilder, private dialog: MatDialog, private _snackBar: MatSnackBar) {
    this.serviceForm = this.formBuilder.group({
      ServiceTypes: [''],
      counterList: [''],
    });
  }

  ngOnInit() {
    this.username = localStorage.getItem('username');
    this.subServiceData = localStorage.getItem('changeService');
    if (this.subServiceData === 'Y') {
      this.subService = true;
    } else {
      this.subService = false;
    }
    this.linkFuncData = localStorage.getItem('linkToken');
    if (this.linkFuncData === 'Y') {
      this.linkFunc = true;
    } else {
      this.linkFunc = false;
    }
    this.pushBackElmData = localStorage.getItem('pushBack');
    if (this.pushBackElmData === 'Y') {
      this.pushBackElm = true;
    } else {
      this.pushBackElm = false;
    }
    this.filterVal1 = '0';
    this.filterVal2 = '1';
    this.openSocket();
    this.counterName = localStorage.getItem('counterId');
    this.counterId = Number(localStorage.getItem('counterId'));
    this.getCounterName();
    this.getServiceList();
    this.getCounterServiceList();
    this.dispCounterDetails();
  }

https://stackoverflow.com/a/51168985/9251955

my issue is something similar to the above link and I hope @WesleyCoetzee can give solution on this, till now I am unable to find the solution. basically I am passing some params in the URL and those params data are storing in the local storage when the default login page is loaded

http://localhost:4200/login?counterId=111&serviceType=C&changeService=Y

user need to type the URL manually which will store the param value in the local storage counterId = 111 , servicType = C, ChangeService = Y ...

previously it was loading with a single refresh or when I enter the URL manually then enter it was loading but after using hashing # in routing I need to refresh twice once the URL is entered manually

i have used hashing because, i was facing issue in loading the main page with params in tomcat server. and basically the params will decide the next page with the params value. [1]: https://i.stack.imgur.com/y1xB4.jpg