I just started using the newest version of angular and am trying to work with the routes. I am having some issues getting children routes to work correctly. Basically I have my main app component with a and then a builder component that I have a which I want to update with different components. Now I have the initial blank route working, it loads the sub component and works fine. But if I try a sub route with "pages" it cannot find that route. I may be going about this completely wrong but am looking for some good help!

app-routing.module.ts

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

import { LoginComponent } from './login/login.component';
import { SitesViewComponent } from './sites-view/sites-view.component';
import { BuilderComponent } from './builder/builder.component';
import { ProgramNameComponent } from './program-name/program-name.component';
import { PagesComponent } from './pages/pages.component';

const routes: Routes = [
  { path: '', redirectTo: '/login', pathMatch: 'full' },
  { path: 'login', component: LoginComponent },
  { path: 'sites', component: SitesViewComponent },
  { path: 'builder', component: BuilderComponent,
    children: [
      { path: '', component: ProgramNameComponent, outlet:"buildOutlet" },
      { path: 'pages', component: PagesComponent, outlet:"buildOutlet" }
      ] 
  }
];

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

builder.component.html

<h5>Builder</h5>
<router-outlet name="buildOutlet"></router-outlet>
<button type="button" class="btn btn-secondary btn-sm my-2" routerLink="pages">Next - Pages</button>

1 Answers

1
Saeb Panahifar On Best Solutions

It should be like this.

<button type="button" class="btn btn-secondary btn-sm my-2" routerLink="/builder/pages">Next - Pages</button>