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.

Answer 1

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]);

Answer 2

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/??

Answer 3

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}
        ]
    }