Angular named router-outlet throwing error

Question

I am developing a single page app where there can be multiple reactive forms loaded inside a single template. There are unique routes which connects to these form components. It is ok that when one form is displayed then another one is not shown as only one route can match to a component at once.

To simplify, lets consider there are:

1. two router links - 'view' and 'edit'
2. two components - ViewComponent and EditComponent
3. two router outlets - viewOutlet and editOutlet which are shown adjacent on the page.

When clicked on a 'view' link ViewComponent must be loaded inside viewOutlet and when clicked on a 'edit' link EditComponent must be loaded inside editOutlet. Here it is acceptable that when viewComponent is shown then editOutlet is empty and vice-versa.

I have also created a stackblitz here -

Preview - https://angular-pbyijh.stackblitz.io/app/main

Code - https://stackblitz.com/edit/angular-pbyijh

I have made all the code changes as per the documentation. However I am getting error that Cannot match any routes. URL Segment: 'view'

You may ask why I am using router outlet to display simple components. The reason for that is this stackblitz is just a simplest replica of my real world application. Components in my application have forms. When form is dirty and user tries to navigate away from it I will be displaying confirmation "Do you want to discard the changes". This cannot be accomplished without involving routes as per my knowledge.

Code is below:

app.routing.module.ts

const routes: Routes = [
  {
    path:'',
    component: AppComponent
  }, {
    path:'app',
    loadChildren: './main-app/main-app.module#MainAppModule',
  }
];

main-app.routing.module.ts

const routes: Routes = [
  {
    path: '',
    pathMatch: 'full',
    redirectTo: 'main'
  }, {
    path: 'main',
    component: MainAppComponent,
    children: [
      {
        path: 'view',
        component: ViewComponent,
        outlet: 'viewOutlet'
      },       {
        path: 'edit',
        component: EditComponent,
        outlet: 'editOutlet'
      }

    ]
  }
];

Router outlet segment in main-app.component.html

<div class="parent">
  <div class="block">
    <router-outlet name="viewOutlet"></router-outlet>
  </div>

  <div class="block">
    <router-outlet name="editOutlet"></router-outlet>
  </div>
</div>

Answer 1

Everythings seems correct in your code except the navigation methods in the component

method 1:

<a [routerLink]="[{outlets: {'viewOutlet': ['view']}}]" >Load View</a> | <a [routerLink]="[{outlets: {'editOutlet': ['edit']}}]">Load Edit</a>

remove (click) events. This will navigate you into respective outlets.

method 2: Use like this in your navigation methods

this.router.navigate([{ outlets: {'viewOutlet': ['view']}}],{relativeTo:this.route});