Angular 2 - multiple parameters of root path router

Question

I'm trying to get multiple parameters of root page of my Angular 2 application. I want to get param1, param2 ... of path like "http://example.com/param1/param2/.." in my HomeComponent. For example, the path may seem like: "http://example.com/telephones/accessories/cases" But i can get only the first parameter.

app-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

const routes: Routes = [
  { path: '', loadChildren: () => import('./pages/home/home.module').then(m => m.HomeModule) },
  { path: ':a', loadChildren: () => import('./pages/home/home.module').then(m => m.HomeModule) },
  { path: ':a/:b', loadChildren: () => import('./pages/home/home.module').then(m => m.HomeModule) },
  { path: '**', redirectTo: '', pathMatch: 'full' }
];

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

home-routing.module.ts

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

const routes: Routes = [
  { path: '', component: HomeComponent },
];

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

home.component.ts

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css'],
})
export class HomeComponent implements OnInit 
{
  id1:any;
  id2:any;

  constructor(private activateRoute: ActivatedRoute,){}

  ngOnInit() {
      this.id1 = this.activateRoute.snapshot.params['a'];
      console.log("id1 - "+this.id1);
      this.id2 = this.activateRoute.snapshot.params['b'];
      console.log("id2 - "+this.id2);
    };
}

On http://localhost:4200/param1 it works, but http://localhost:4200/param1/param2 is not, i'm getting error:

GET http://localhost:4200/param1/runtime.js net::ERR_ABORTED 404 (Not Found)

I've try another way like this:

app-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

const routes: Routes = [
  { path: '', loadChildren: () => import('./pages/home/home.module').then(m => m.HomeModule) },
  { path: '**', redirectTo: '', pathMatch: 'full' }
];

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

home-routing.module.ts

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

const routes: Routes = [
  { path: '', component: HomeComponent, pathMatch: 'full' },
  { path: ':a', component: HomeComponent, pathMatch: 'full' },
  { path: ':a/:b', component: HomeComponent, pathMatch: 'full' },
];

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

with absolutely the same result.

Please, advise how can i resolve my problem?

Radik · Accepted Answer · 2020-05-14 11:48:24Z

1

have you added base in your index.html?

<!doctype html>
<html lang="en">
  <head>
    <base href="/">
  </head>
  <body>
   <my-app>loading</my-app>
  </body>
</html>

in example you can download and build example it will have broken index.html

answered May 14, 2020 at 11:48

Radik

2,7931 gold badge23 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

MichaelSun Over a year ago

i provide APP_BASE_HREF in my app.module.ts : providers: [{provide: APP_BASE_HREF, useValue: '/'}], but i also have try your variant with same no result

MichaelSun Over a year ago

your example is working perfect, i'm trying to understand what wrong in my structure (it is some different from your)

MichaelSun Over a year ago

Resume: i've used providers: [{provide: APP_BASE_HREF, useValue: '/'}], instead of <base href="/"> in index.html supposing it is same, but on the practice, in my case they do it differently. @Radik thank you!

Katya Pavlenko · Accepted Answer · 2020-05-14 11:07:45Z

0

use children to achieve what you want

const routes: Routes = [
  { path: '', 
   component: HomeComponent,
   pathMatch: 'full',
   children: [
      { path: ':a', 
        component: HomeComponent,
        pathMatch: 'full', 
        children: [
           { path: ':b', component: HomeComponent, pathMatch: 'full' }
        ]
      }
   ]
];

answered May 14, 2020 at 11:07

Katya Pavlenko

3,4033 gold badges19 silver badges29 bronze badges

1 Comment

MichaelSun Over a year ago

Katerina, unfortunately it's not working. In your descision i can't get even first parameter.

Collectives™ on Stack Overflow

Angular 2 - multiple parameters of root path router

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related