CODEWITHSUNDEEP
angularangular-ui-routerangular6router
Viktor Molnar
Viktor Molnar

Reputation: 99

Angular 6 app after refresh redirects to root

I have problem with my angular 6 app, after refresh it goes back to root. I found where is problem but I don't know how to change or add code.

import { Component, OnInit } from "@angular/core";
import * as firebase from "firebase";
import { Router } from "@angular/router";
import { UserService } from "../../service/user.service";

@Component({
  selector: "app-navbar",
  templateUrl: "./navbar.component.html",
  styleUrls: ["./navbar.component.css"]
})
export class NavbarComponent implements OnInit {
  isLoggedIn: boolean = false;
  name: string;
  email: string;
  uid: string;
  spec: string;
  constructor(private userService: UserService, private router: Router) {}

  ngOnInit() {
    this.userService.statusChange.subscribe(userData => {
      if (userData) {
        this.name = userData.name;
        this.email = userData.email;
        this.uid = userData.uid;
        this.spec = userData.spec;
      } else {
        this.name = null;
        this.email = null;
        this.uid = null;
        this.spec = null;
      }
    });

    firebase.auth().onAuthStateChanged(userData => {
      if (userData) {
        this.isLoggedIn = true;
        console.log("user is login");
        const user = this.userService.getProfile(); 
        if (user && user.name) {
          this.name = user.name;
          this.email = user.email;
          this.uid = user.uid;
          this.spec = user.spec;
        }
        this.router.navigate(["/"]);// **REFRESH PROBLEM**
      } else {
        this.isLoggedIn = false;
        console.log("user is logout");
        this.router.navigate(["/login"]);
      }
    });
  }
  onlogout() {
    firebase
      .auth()
      .signOut()
      .then(() => {
        this.userService.remove();
        this.isLoggedIn = false;
      });
  }
}

For example if i add in this.router.navigate(["/"]) some of my routes it will always redirect to that new root, but if i delete all, it will go back to root again. Maybe local storage can help, but i dont know how to implement :(

Updated Routing module

  RouterModule.forRoot([
      {
        path: "",
        component: DashboardComponent,
        canActivate: [AuthGuardService]
      },
      { path: "login", component: LoginComponent },
      { path: "register", component: RegisterComponent },
      {
        path: "pacijent/:id",
        component: PacijentComponent,
        canActivate: [AuthGuardService]
      },

      {
        path: "pacijent/:id/edit",
        component: PacijentEditComponent,
        canActivate: [AuthGuardService]
      },
      {
        path: "novi-pacijent",
        component: NoviPacijentComponent,
        canActivate: [AuthGuardService]
      },
      {
        path: "istorija/:id/:id",
        component: NalazComponent,
        canActivate: [AuthGuardService]
      },
      { path: "**", component: NotfoundComponent }
    ])
  ],

Upvotes: 2

Views: 5149

Answers (3)

niteshbisht
niteshbisht

Reputation: 199

The best you can do is to stay on current route just place 

this.router.navigate([""]);

Will reload the route but you have to set the reuseroute strategy to false to force reload the route.

If you want to pass any query params along with it

let params = ...; // define query params

this.router.navigate([""], params);

Upvotes: 0

tausif
tausif

Reputation: 151

If you want to be on the current page after refreshing then use this.router.url

You can replace this.router.navigate(["/"]); to this.router.navigate([this.router.url]);

Upvotes: 1

Sunil
Sunil

Reputation: 11243

"/" will always take you to the root.

Mention right path where you want to land.

Ex :

this.router.navigate(["/dashboard"])

Upvotes: 1

Related Questions