Angular router doesn't respond properly for browser url

Question

My problem is when i change the url in the browser it always leads to the start route and when i type something else other than paths that exist in the router i get 404.

app-routing.module.ts

const routes: Routes = [
  {path: "start", canActivate:[RoutingGuard], component: Start},
  {path: "path-1", canActivate:[RoutingGuard], component: One},
  {path: "path-2", canActivate:[RoutingGuard], component: Two},
  {path: "path-3", canActivate:[RoutingGuard], component: Three},
  {path: "path-4", canActivate:[RoutingGuard], component: Four},
  {path: "", component: Public},
  {path: "**", redirectTo: "", pathMatch:'full'}
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})

routing-guard.service.ts:

canActivate() {
        this._mysvc.isAuthorized().subscribe(data => this.auth = data);
        if (!this.auth) {
            this._router.navigate(['/']);
        }
        return this.auth;
    }

I have a login and in Public component i have this method that redirects to /start if the user is logged in.

public.component.ts:

    isAuthorized(authorized:boolean):void {
        if (authorized) {
          this._router.navigate(['/start']);
        }
      }
  ngOnInit():void {
    this._mysvc.isAuthorized().subscribe(this.isAuthorized.bind(this), this.isAuthorizedError);
  }

index.html:

<html lang="en">
<head>
  <base href="/">

  <!--<meta charset="UTF-8">-->
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
</head>
<body>
  <app-root></app-root>
</body>
</html>

I use rewrite config so i skip the # in the url

rewrite.config:

RewriteRule /start/? /index.html [NC]
RewriteRule /path-1/? /index.html [NC]
RewriteRule /path-2/? /index.html [NC]
RewriteRule /path-3/? /index.html [NC]
RewriteRule /path-4/? /index.html [NC]

Can you show us the code for the RoutingGuard? Maybe there is a redirect to /start/? If you call "isAuthorized" in the routing Guard and you are logged in you are of course redirected to /start/ every time. Turn it around so you check for !authorized — Max, Aug 08 '17 at 10:24
Is this: "this._mysvc.isAuthorized()" in your guard the same Method as in your public component? — Max, Aug 08 '17 at 10:29
Yes it is the result of the subscribe to mysvc.isAuthorized() i'll edit my code show it as well! thanks — Hazu, Aug 08 '17 at 10:35

Poul Kruijt · Accepted Answer · 2017-08-08T10:46:28.457

0

The problem is async request which you handle as being sync:

canActivate(): Observable<boolean> {
  return this._mysvc.isAuthorized().do((auth: boolean) => {
     if (!auth) {
       this._router.navigate(['/']);
     }
  });
}

For this you need to import the do operator:

import 'rxjs/add/operator/do'

Or:

async canActivate(): Promise<boolean> {
  if (!await this._mysvc.isAuthorized().toPromise()) {
     this._router.navigate(['/']);
  }
  return auth;
}

for this you need to import the toPromise operator

import 'rxjs/add/operator/toPromise';

edited Aug 08 '17 at 10:46

answered Aug 08 '17 at 10:33

Poul Kruijt

69,713
12
145
149

I get this error message trying to build "Property 'do' does not exist on type 'Observable" and in the second way how do i set the value of auth? – Hazu Aug 08 '17 at 10:44
I've updated my answer, if you are using the `angular-cli`, you can add these imports into your `polyfills.ts` – Poul Kruijt Aug 08 '17 at 10:46
Thanks it seems to be working fine now! i was wondering why should i import this "import 'rxjs/add/operator/do'" in pollyfills.ts? i imported it in routing-gaurd.service.ts! – Hazu Aug 08 '17 at 11:00
because this way you only need to import it once, and you have a general file where you can add more operators when necessary – Poul Kruijt Aug 08 '17 at 11:36

Angular router doesn't respond properly for browser url

1 Answers1