Use helper routes in nested child components

Question

I am trying to use Helper Routes in a child component similar to a problem. Since the published “solution” is more like a workaround, I'm curious how to do this, as in the blogpost above.

I am using Angular 2.1.2 with router 3.1.2.

parent.module

import { NgModule }             from '@angular/core';
import { RouterModule }         from '@angular/router';
import { BrowserModule }        from '@angular/platform-browser';

import { ParentComponent }      from './parent.component';

import { ChildModule }          from '../child/child.public.module';
import { ChildComponent }       from '../child/child.public.component';

import { OtherModule }          from '../other/other.public.module'


@NgModule({
    imports: [
        ChildModule,
        OtherModule,
        RouterModule.forRoot([
            { path: '', component: ChildComponent }
        ])
    ],
    declarations: [ ParentComponent ],
    bootstrap:    [ ParentComponent ]
}) 

export class ParentModule { }

parent.component

import {Component} from '@angular/core';

    @Component({
        selector: 'my-app',
        template: '<router-outlet></router-outlet>'
    })

export class ParentComponent{ }

child.module

import { NgModule }             from '@angular/core';
import { RouterModule}          from '@angular/router';
import { CommonModule }         from '@angular/common';

import { ChildComponent }       from './child.public.component';

import { OtherComponent }       from '../other/other.public.component'

@NgModule({
    imports: [
        CommonModule,
        OtherModule,
        RouterModule.forChild([
            {path: 'other', component: OtherComponent, outlet: 'child'}
        ])
    ],
    declarations: [ ChildComponent ],
    exports:    [ ChildComponent ],
})
export class ChildModule { }

child.component

import { Component } from '@angular/core';

@Component({

    selector: 'child-view',
    template: '<router-outlet name="child"></router-outlet>',
})

export class ChildComponent{}

So, when I try to go to / (child: other), I get a typical:

Error

Cannot find the outlet child to load 'OtherComponent'

Answer 1

I think there is a bit of confusion.

Let's look at the parent route:

• only the route is accessible: "", which child.component will load

• child.module, .

, : - parent.component -

, . ....

• child.module, :

  {path: 'child', loadChildren: 'app/child.module # ChildModule'}

• :

  {path: 'other', component: OtherComponent, outlet: 'side'}

:

//(: )

, : https://github.com/thiagospassos/Angular2-Routing

Answer 2

-, . - @usche:

RouterModule.forChild([ {path: '', component: ChildComponent}, {path: 'other', component: OtherComponent, outlet: 'child'} ])

ChildComponent, , ""