Angular2: Child routes

Question

I have a home component that I would like to display at all times. It is a dropdown menu. When an item in the menu is clicked, a form pops up below. I want the dropdown to display at all times. Originally I designed it like this:

my-app.html

<div>
  <dropdown-selector></dropdown-selector>
  <router-outlet></router-outlet>
</div>

The routing worked fine, but I kept getting Error: Cannot match any routes: ''(…) even though I have the base tag defined in my index.html.

Then I thought that I should define the dropdown as the parent route, and have all the dropdown item routes be its children.

app-routes.ts excerpt

export const APPLICATION_ROUTES: RouterConfig = [
    {
        path: '',
        component: Home, // dropdown-selector is inside this component
        children: [
          {path: 'forms/1', component: Form1},
          {path: 'forms/2', component: Form2},
          {path: 'forms/3', component: Form3},
          {path: 'forms/4', component: Form4},
          {path: 'forms/5', component: Form5},
          {path: 'forms/6', component: Form6},
          {path: 'forms/7', component: Form7},
          {path: 'forms/8', component: Form8}
        ]
    }
];

And then redefine my-app.html...

my-app.html

<div>
  <router-outlet></router-outlet>
</div>

I keep getting the same error anyway, but now the dropdown won't even display. Also, with the new router, I don't think there is a way to set a default route. I was assuming that '' was the default route. I am using Angular2 RC.4.

Am I designing this the wrong way? What's up with that error? I saw a lot of SO posts addressing it, but none of them solved my issue.

Answer 1

First of all, I think your first design is what you want, as I have the same behavior on my solution :

I want my header and footer to be displayed all the time, and navigate through components in the middle of the page.

<headerComponent></headerComponent>
<router-outlet></router-outlet>
<footerComponent></footerComponent>

---

Now to your main problem, which is

Error: Cannot match any routes: ''(…)

I would need more code that shows how you navigate with your router, but I will give you the following hints :

It means that when you launch your app, the url looks like this :

http://localhost:39351/

and therefore the path is empty : ''

You need to define a route to manage that case as well (If you need to and I think you do not in this case). For example, when I launch my app I want it to load a component by default, and I do it that way :

{ path: '', redirectTo: '/login', pathMatch: 'full' },
{ path: 'login', component: LoginComponent },

In your case, it seems that you want to display your form on a click and then access that route on the click. To do that, you need to manage the click like this in your dropdown-selector component Html :

<button type="button" (click)="navigate('btn_home')"> 
</button>

And then tell the router to navigate to your path :

navigate(elementID) {
       switch (elementID) {
                case 'btn_home':
                    this.router.navigate(['/master']);
                    break;
                default:
                    break;
       }
}

Hope this helps.