CODEWITHSUNDEEP
angular
psemdel
psemdel

Reputation: 41

404 with Angular params route

I have a quite strange issue with params routing in Angular. If I code it in Stackblitz, it works, but locally I get error 404.

app.module.ts

import { RoutingModule } from './routing.module';
import { ConfirmEmailComponent } from './confirm-email/confirm-email.component';
 
@NgModule({
  imports:      [
   RoutingModule,
   ],
  declarations: [ ConfirmEmailComponent],
)}

routing.module.ts

import { ConfirmEmailComponent } from './confirm-email/confirm-email.component';

const routes: Routes = [
    { path: "activate/:uid/:token", component: ConfirmEmailComponent },
];

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

In ConfirmEmailComponent

import { Router, ActivatedRoute, ParamMap } from '@angular/router';
import { HttpClient } from '@angular/common/http';

    constructor(
        private http: HttpClient, 
        private route: ActivatedRoute,
    ) { }

    ngOnInit() {
        this.uid = this.route.snapshot.paramMap.get("uid");
        this.token = this.route.snapshot.paramMap.get("token");
    }

I also tried with subscribe, but I get the same problem. Other routes work just fine.

So I go to root/activate/a/b and I got error "http://localhost:4200/activate/ab/runtime.js net::ERR_ABORTED 404 (Not Found)"

If I add to router the following line, there is no error 404, but of course no uid or token.

    { path: "activate", component: ConfirmEmailComponent },

I don't understand what changes between Stackblitz (https://angular-tufqi9.stackblitz.io/) and local. Any idea?

EDIT: I made some supplementary tests. If I type the address in the url-bar of my browser, still the same problem. So http://localhost:4200/activate/abc/edf.

But, if I link a button to either

this.router.navigate(['activate', "abc", "edf"]);

or

this.router.navigateByUrl('activate/abc/edf');

Then it works. Strangely, if I make F5, the problem comes back.

What is the difference between Url typing in browser and this.router.navigate?

Upvotes: 2

Views: 1036

Answers (2)

MB_18
MB_18

Reputation: 2261

An alternative way can be employed. Instead of

http://example.com/activate/abc/edf

use the following url:

http://example.com/activate?uid=abc&token=edf

You just need to add activate path to the routes, and the parameters can be retrieved in the constructor as follow:

import { ConfirmEmailComponent } from './confirm-email/confirm-email.component';

    const routes: Routes = [
        { path: "activate", component: ConfirmEmailComponent },
    ];
    
    @NgModule({
        imports: [RouterModule.forRoot(routes)],
        exports: [RouterModule]
    })
    export class RoutingModule { }

export class ConfirmEmailComponent {

constructor(private route: ActivatedRoute){
    this.route.queryParams.subscribe(params => {
      this.uid= params['uid'];
      this.token= params['token'];
  });
  }
  uid: string;
  token: string;
}

Upvotes: 1

Or Shalmayev
Or Shalmayev

Reputation: 315

check your index.html change your base href to:

  <base href="/">

Upvotes: 2

Related Questions