Angular2 Query Params Subscription Fires Twice

Question

Trying to handle an OAuth login scenario where if the user lands on a page with authorization_code in the query string, we process the token and continue

Answer 1

Just in case someone is looking for a solution to this, I found a workaround that works pretty well. The solution I came up with involves only doing the subscription on the NavigationEnd event of the Router instance.

import { ActivatedRoute, Router, NavigationEnd } from '@angular/router';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  constructor(
    private route: ActivatedRoute,
    private router: Router
  ) {}
  ngOnInit() {
    this.router.events
      .subscribe(e => {
        if (e.constructor.name === 'NavigationEnd' && this.router.navigated) {
          this.route.queryParams
            .subscribe(params => {
              // do something
            })
            .unsubscribe();
        }
      });
  }

Answer 2

Put your subscription code on ngAfterViewInit method,

ngAfterViewInit() {
    this.route.queryParams.subscribe(params => {
      debugger;
    });
}