Angular 4 Lazy Loading Route not match any route

Question

I have a simple login and mainpage where the mainpage is being lazy loaded. That works but route to the children of the mainpage is not working. I am at a lost on how to fix this. If the route is declared as a routelink it works but if it is called via this.route.navigate(['about']) it is not working.

The error I get from debug console is

ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'about'
Error: Cannot match any routes. URL Segment: 'about'
    at ApplyRedirects.webpackJsonp.../../../router/@angular/router.es5.js.ApplyRedirects.noMatchError (VM4677 vendor.bundle.js:96886)



//app.module.app
@Component({
  selector: 'app-root',
  templateTemplate: ` <router-outlet></router-outlet>`,
  styleUrls: ['./app.component.css'],
  providers: [ ]
})
export class AppComponent implements OnInit, OnDestroy {


  constructor( ) {} // , private chat: ChatService ) { }


  ngOnInit(): void {
  }

  ngOnDestroy() {
  }

}

//app-routing.module.ts
const routes: Routes = [

  { path: '', component: LoginComponent },
  { path: 'login', component: LoginComponent },
  { path: 'mainpage', loadChildren: 'app/mainpage/mainpage.module#MainpageModule'  },
  { path: '', redirectTo: '/', pathMatch: 'full' },

];

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

//mainpage.routing.ts

const childroutes: Routes = [
  { path: '', redirectTo: 'mainpage', pathMatch: 'full'},
  { path: 'mainpage', component: MainpageComponent  ,
    children: [ {path: 'about', component: AboutComponent} ]
 }

];

export const routing: ModuleWithProviders = RouterModule.forChild(childroutes);

const newLocal: NgModule = {
    imports: [RouterModule.forChild(childroutes) ],
    exports: [RouterModule, ],
    declarations: []
};

@NgModule(newLocal)

export class MainRoutingModule { }


//mainpage.component.ts

@Component({
  selector: 'app-main',
  templateTemplate: `<div fxLayout="row">
   <!-- <div fxFlex="25"> <a [routerLink]="['about']"> About</a>
   </div> -->
 <div fxFlex="10"><button  (click)="onClicked()">about</button> </div>
  <div fxFlex="nogrow"> <p>New</p> <router-outlet></router-outlet></div>
</div>`,

})


public onClicked() {
  this.route.navigate(['about']);
}

Answer 1

I do not see a route about defined in your routes, even if its defined It should be,

public onClicked() {
  this.route.navigate(['mainpage','about']);
}