Why Can't I Inject RouterStateSnapshot into Login Component in Angular 2 App?

I think you can get the RouterStateSnapshot from the RouterState. Consider this example:

constructor(private router: Router) {    let routerStateSnapshot = this.router.routerState.snapshot;}

RouteGuardService.ts

import {Injectable} from '@angular/core';import {ActivatedRouteSnapshot, CanActivate, Router} from '@angular/router';import {LoginService} from './login.service';@Injectable({  providedIn: 'root'})export class RouteGuardService implements CanActivate {  constructor(private loginService: LoginService, private router: Router) {  }  canActivate(activatedRoute: ActivatedRouteSnapshot): boolean {    if (this.loginService.isLoggedIn()) {      return true;    }    this.router.navigate(['login'], {queryParams: {returnUrl: activatedRoute.routeConfig.path}});    return false;  }}

LoginComponent.ts

import {Component, OnInit} from '@angular/core';import {ActivatedRoute, Router} from '@angular/router';import {LoginService} from '../service/login.service';@Component({  selector: 'app-login',  templateUrl: './login.component.html',  styleUrls: ['./login.component.css']})export class LoginComponent implements OnInit {  errorMessage = 'Invalid Credentials';  invalidLogin = false;  username = 'in28minutes';  password = 'novell';  returnUrl: string;  constructor(private router: Router, public loginService: LoginService, private activatedRoute: ActivatedRoute) {  }  ngOnInit(): void {  }  handleLogin(): any {    this.returnUrl = this.activatedRoute.snapshot.queryParams.returnUrl || `/welcome/${this.username}`;    if (this.loginService.authenticate(this.username, this.password)) {      this.router.navigateByUrl(this.returnUrl);    } else {      this.router.navigate(['login']);      this.invalidLogin = true;    }  }}

app-routing.module.ts

import {Component, NgModule} from '@angular/core';import {RouterModule, Routes} from '@angular/router';import {LoginComponent} from './login/login.component';import {TodoListComponent} from './todo-list/todo-list.component';import {WelcomeComponent} from './welcome/welcome.component';import {ErrorComponent} from './error/error.component';import {RouteGuardService} from './service/route-guard.service';import {TodoComponent} from './todo/todo.component';const routes: Routes = [  {path: '', component: LoginComponent, canActivate: [RouteGuardService]},  {path: 'login', component: LoginComponent},  {path: 'welcome/:username', component: WelcomeComponent, canActivate: [RouteGuardService]},  {path: 'todos', component: TodoListComponent, canActivate: [RouteGuardService]},  {path: 'todo/:id', component: TodoComponent, canActivate: [RouteGuardService]},  {path: '**', component: ErrorComponent}];@NgModule({  imports: [RouterModule.forRoot(routes)],  exports: [RouterModule]})export class AppRoutingModule {}

If you want to create returnUrl from a method/function instead of using canActivate Interface or Authguard,In the function,

constructor (    private route: ActivatedRoute,}sampleFunction (){    this.router.navigate(['/auth/login'], {        queryParams: {            returnUrl: this.router.routerState.snapshot.url        }    })}