Using multiple routers in an angular app (NOT in single component or in child routes)

Question

In my angular app, I have 3 components.

1. First is a login component.
2. Upon successful login, the user goes to dashboard component.
3. Dashboard component has two tabs namely for, add and list components.

My problem is with router-outlet.

The login and dashboard components are shown in main router-outlet which is not named. The dashboard component has another router-outlet. This one is named as follows.

<router-outlet name='app'></router-outlet>

Problem

When a user clicks on a tab, say add, then AddComponent should be shown in router-outlet named app, but instead, I'm getting following error,

Error: Cannot match any routes. URL Segment: 'add'↵Error: Cannot match any routes. URL Segment: 'add'↵ at ApplyRedirects.noMatchError

When I removed outlet property from route definition, then the AddComponent is shown in unnamed router-outlet, overriding dashboard component.

Routes defined

[
  {
    path: 'login',
    component: LoginComponent
  },
  {
    path: 'dashboard',
    component: DashboardComponent,
    canActivate:[ LoginGuard ]
  },
  {
    path: 'add',
    component: AddComponent,
    outlet: 'app'
  },
  {
    path: 'list',
    component: ListComponent,
    outlet: 'app'
  },
  {
    path: '',
    redirectTo: '/login',
    pathMatch: 'full'
  }
]

Note I have tried the answer given here but getting above mentioned error.