Accepted answer

"Uncaught (in promise): Error: Cannot match any routes. URL Segment: ‘tabs/groups"

 change tabs routing to

{
        path: '',
        redirectTo: 'groups',
        pathMatch: 'full'
      }
    ]
  },
  {
    path: '',
    redirectTo: 'tabs',
    pathMatch: 'full'
  }
Accepted answer

path: '',

it should be like this 

const routes: Routes = [{
  path: '',
  component: DashBoardComponent,
  children: [
   {
      path: '',
      redirectTo: 'home',
      pathMatch: 'prefix'
   },
   {
      path: 'home',
      component: HomeComponent
   }
 ]
}];

You can use @angular/cli to generate your routing module so it's created with a better name. If you create it using cli commands, set the name as routing as Angular will already add module for you. explicity adding module to your name will give you the redudant Module word in your class name (RoutingModuleModule).

Remove the routes created in your app.module.ts and import RoutingModule (or RoutingModuleModule in your case)

imports: [
  BrowserModule,
  RoutingModuleModule
]

Move the route from your app.module.ts to your routing.module.ts

const routes: Routes = [
   { path: '' , redirectTo: '/task', pathMatch: 'full' }
   { path: 'login', component: LoginComponent },
   { path: 'task' , component: TaskManagerComponent }
];

Route from Component1 to Component2 is done by a single <router-outlet>Component2 to Comonent3 and Component4 is done by multiple <router-outlet name= "xxxxx"> The resulting contents are :

Component1.html

<nav>
    <a routerLink="/two" class="dash-item">Go to 2</a>
</nav>
    <router-outlet></router-outlet>

Component2.html

 <a [routerLink]="['/two', {outlets: {'nameThree': ['three']}}]">In Two...Go to 3 ...       </a>
 <a [routerLink]="['/two', {outlets: {'nameFour': ['four']}}]">   In Two...Go to 4 ...</a>

 <router-outlet name="nameThree"></router-outlet>
 <router-outlet name="nameFour"></router-outlet>

The '/two' represents the parent component and ['three']and ['four'] represents the link to the respective children of component2 . Component3.html and Component4.html are the same as in the question.

router.module.ts

const routes: Routes = [
{
    path: '',
    redirectTo: 'one',
    pathMatch: 'full'
},
{
    path: 'two',
    component: ClassTwo,
    children: [
        {
            path: 'three',
            component: ClassThree,
            outlet: 'nameThree'
        },
        {
            path: 'four',
            component: ClassFour,
            outlet: 'nameFour'
        }
    ]
}];

modify your router.module.ts as:

const routes: Routes = [
{
    path: '',
    redirectTo: 'one',
    pathMatch: 'full'
},
{
    path: 'two',
    component: ClassTwo, children: [
        {
            path: 'three',
            component: ClassThree,
            outlet: 'nameThree',
        },
        {
            path: 'four',
            component: ClassFour,
            outlet: 'nameFour'
        },
        {
           path: '',
           redirectTo: 'two',
           pathMatch: 'full'
        }
    ]
},];

and in your component1.html

<h3>In One</h3>

<nav>
    <a routerLink="/two" class="dash-item">...Go to Two...</a>
    <a routerLink="/two/three" class="dash-item">... Go to THREE...</a>
    <a routerLink="/two/four" class="dash-item">...Go to FOUR...</a>
</nav>

<router-outlet></router-outlet>                   // Successfully loaded component2.html
<router-outlet name="nameThree" ></router-outlet> // Error: Cannot match any routes. URL Segment: 'three'
<router-outlet name="nameFour" ></router-outlet>  // Error: Cannot match any routes. URL Segment: 'three'