Angular 6 routing redirected to original component as the url is not found

Question

I am having a problem with routing. I am at the unit component adding a new unit to my database. The url is like the following:

http://localhost:4200/dashboard/registration/unit

When the insert to my database is successful, the id is sent back from PHP to the .subscribe() method:

 .subscribe(
    (data)=>{
      console.log(data);

      //this.router.navigate(['unit/addH/'+data]);

    },
    (error)=>{
      console.log(error);
    }
  )

I need to redirect into another component directly, taking the id returned with me through the url:

 .subscribe(
    (data)=>{
      console.log(data);

      this.router.navigate(['unit/addH/'+data]);

    },
    (error)=>{
      console.log(error);
    }
  )

So the data available at the console, but when redirected, it took me to the initial component as the path is not recognized.

Here is the routing paths:

const routes: Routes = [
  {
    path: '',
    component: RegistrationComponent
  },
  {
    path: 'unit',
    component: UnitComponent
  },
  {
    path: 'unit/:unit_id',
    component: UnitEditComponent
  },
  {
    path: 'unit/addH/:uid',
    component: AddHComponent
  },
  {
    path: '**',
    redirectTo: 'registration',
    pathMatch: 'full'
  }
];

I tried to use the queryParams:

this.router.navigate(['unit/addH', {queryParams: {unit_id: data}}]);

But still redirect to `registration component.

Please note that there is no errors at the console.

At the network tab:

EDIT

Full routing script:

The first routing module (Parent):

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { LoginComponent } from './login/login.component';
import { ForgotPasswordComponent } from './forgot-password/forgot-password.component';
import { AuthGuardService } from './auth-guard.service';

const routes: Routes = [
  {
    path: 'login',
    component: LoginComponent
  },
  {
    path:'',
    component: LoginComponent
  },
  {
    path: 'forgot',
    component: ForgotPasswordComponent
    //canActivate: [AuthGuardService]
  },
  {
    path:'dashboard',
    loadChildren: '../app/dashboard/dashboard.module#DashboardModule'

  },
  {
    path: '**',
    redirectTo: 'login',
    pathMatch: 'full'
  }
];

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

The dashboard module:

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { DashboardComponent } from './dashboard.component';
import { HomeComponent } from './home/home.component';

const routes: Routes = [
  {
    path:'',
    component: DashboardComponent,
    children: [
      {
        path:'',
        component: HomeComponent  
      },
      {
        path: 'home',
        loadChildren: './main-navbar/main-navbar.module#MainNavbarModule'
      },
      {
        path: 'registration',
        loadChildren: './registration/registration.module#RegistrationModule'
      }
    ]
  },

  {
    path:'**',
    redirectTo: 'dashboard',
    pathMatch: 'full'
  }
];

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

The registration module:

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { RegistrationComponent } from './registration.component';
import { UnitComponent } from './unit/unit.component';
import { UnitEditComponent } from './unit/unit-edit/unit-edit.component';
import { AddHouseholdComponent } from './unit/add-household/add-household.component';

const routes: Routes = [
  {
    path: '',
    component: RegistrationComponent
  },
  {
    path: 'unit',
    component: UnitComponent
  },
  {
    path: 'unit/:unit_id',
    component: UnitEditComponent
  },
  {
    path: 'unit/addH/:uid',
    component: AddHouseholdComponent
  },
  {
    path: '**',
    redirectTo: 'registration',
    pathMatch: 'full'
  }
];

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

I am being redirected to the login component.

putting a forward slash before your route might solve your issue, this.router.navigate(['/unit/addH/'+data]); — Wasif Ali, Sep 14 '18 at 06:15
from which route you are navigating to this route, means what is your active route when you navigate to this route? — Wasif Ali, Sep 14 '18 at 06:18
Is the returned `data` a string? If so, have you tried `this.router.navigate(['/unit/addH', data]);` — nipuna-g, Sep 14 '18 at 06:23
Also, you can enable router stack tracing to make your life easier when debugging routing issues. `imports: [ RouterModule.forRoot(routes, { enableTracing: true }) ],` — nipuna-g, Sep 14 '18 at 06:24
The returned data is from PHP as JSON and it is an integer displayed at the console as `"153"` per example — alim1990, Sep 14 '18 at 06:39
Okay you can now check it. @WasifAle I will do a fiddle in the afternoon and send you the link, if no one solve it. — alim1990, Sep 14 '18 at 06:49
@Exterminator yes, because at the server side I am sending it as `json_encode($res)` — alim1990, Sep 14 '18 at 06:58
Guys I've added all routing scripts at the end of the question. Please check it. — alim1990, Sep 14 '18 at 07:16

Exterminator · Answer 1 · 2018-09-14T07:23:30.177

1

First of all you need to convert that string into integer using parseInt() function then you can use the following method

let id= parseInt(data);
this.router.navigate(['unit/addH', id]);

OR

this.router.navigate(['/unit/addH', id]);

Hope this helps.

Trying defining the routes in such a way

 {
 path: 'unit', component: UnitComponent
        children: [
            {path: '', component: UnitComponent},
            {path: 'unit/:unit_id', component: UnitEditComponent},
            {path: 'unit/addH/:id', component: AddHouseholdComponent}
        ]
    }

edited Sep 14 '18 at 07:23

answered Sep 14 '18 at 07:03

Exterminator

1,221
7
14

`[ts] Argument of type 'Object' is not assignable to parameter of type 'string'.` so it is giving me error on `data` saying it is an object and can't convert it – alim1990 Sep 14 '18 at 07:05
try using `(data: any)=>{}` or `JSON.stringify(data)` will work – Exterminator Sep 14 '18 at 07:08
Okay, give me one minute – alim1990 Sep 14 '18 at 07:12
I posted all my routing modules ( I am using lazy loading). You can check them at then end of my question. – alim1990 Sep 14 '18 at 07:15
Please note that I am able to access the addH/id by writing it manually – alim1990 Sep 14 '18 at 07:17
Did you check your current route? Have tried removing unit from the first argument? – itdoesntwork Sep 14 '18 at 07:19
Try this.router.navigate([this.router.url + '/addH', id]); Log this.router.url to see where you are. – itdoesntwork Sep 14 '18 at 07:21
check the route i define and use it – Exterminator Sep 14 '18 at 07:23
and also there is no need of defining `path: '**'` part as well – Exterminator Sep 14 '18 at 07:25
Both `{path: 'unit/:unit_id', component: UnitEditComponent}, {path: 'unit/addH/:id', component: AddHouseholdComponent}` redirecting me to the parent component `dashboardComponent` – alim1990 Sep 14 '18 at 07:28
You can access my computer using teamviewer guys – alim1990 Sep 14 '18 at 07:30
I can help with that but in the evening time. I guess problem here is that you are using multiple modules, so it is not able to get the route file of rest of the modules – Exterminator Sep 14 '18 at 07:32

score 0 · Answer 2 · answered Sep 14 '18 at 08:07

You should specify that you want to navigate to a relative route where you call router.navigate. It should look like this:

    this.router.navigate(['addH', id],{relativeTo:this.route});

This will mean that you are navigating to: http://localhost:4200/dashboard/registration/unit/addH/?? Instead of navigating to: http://localhost:4200/unit/addH/??

score 0 · Answer 3 · answered Sep 18 '18 at 12:01

The solution was by adding an absolute path when using navigate():

this.router.navigate(['/dashboard/registration/unit/addHH', id]);

For a detailed answer on each type of navigation and which path to be used when working with different navigation methods, refer to this answer on stack overflow, at which, the user explained it as following:

You put the absolute path to the URL of the component you want to navigate to.

Note: Always specify the complete absolute path when calling router's navigateByUrl method. Absolute paths must start with a leading /

// Absolute route - Goes up to root level
this.router.navigate(['/root/child/child']);

// Absolute route - Goes up to root level with route params
this.router.navigate(['/root/child', crisis.id]);

Angular 6 routing redirected to original component as the url is not found

3 Answers3