Angular 2 router, error: do not activate an already activated outlet

I think I can not understand Angular 2 routing at all. I have this structure in my application:

const routes: Routes = [
    {
        path: 'login',
        component: LoginViewComponent
    },
    {
        path: 'main',
        component: MainComponent,
        children:
        [
            {
                path: 'unit_list',
                component: ListViewComponent
            },
            {
                path: 'unit_info',
                component: UnitInfoComponent,
                children:
                [
                    {
                        path: 'patient',
                        component: PatientDetailsComponent
                    }
                ]
            }
        ]
    },
    {
        path: '',
        redirectTo: 'main',
        pathMatch: 'full'
    }
];

This is what my app.module looks like:

@NgModule({
    imports: [
        BrowserModule,
        FormsModule,
        HttpModule,
        MainModule,
        routing
    ],
    declarations: [
        AppComponent,
        LoginViewComponent
    ],
    bootstrap: [AppComponent]
})

And main.module

@NgModule({
    imports: [
        CommonModule,
        FormsModule,
        RouterModule
    ],
    declarations: [
        ListViewComponent,
        MainComponent,
        PatientDetailsComponent,
        UnitInfoComponent,
    ]
})

The problem is that I cannot control the operation of the router.navigateByUrl function.

I have a function ngOnInit () inside the PatientDetailsComponent that checks if the patient is null if then I call it "this.router.navigateByUrl (" / main / unit _info ")", but this generates an error in the header: "Unable to activate an already activated outlet. " It worked fine in Angular 2.1.1, but when I upgraded to 2.4.X, none of them fixed my problems. I am also not sure if this routing is correct, because I am a bit lost.

2.4.X: http://pastebin.com/Y377STcW

+4
2

< > !

Chrome - :

 core.js:1440 ERROR Error: Uncaught (in promise): Error: Cannot
 activate an already activated outlet Error: Cannot activate an already
 activated outlet
     at RouterOutlet.activateWith (router.js:6676)
     at ActivateRoutes.activateRoutes (router.js:5765)
     at eval (router.js:5705)
     at Array.forEach (<anonymous>)
     at ActivateRoutes.activateChildRoutes (router.js:5704)

html, .

!

. , :

core.js:1440 ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'foo' of null
TypeError: Cannot read property 'foo' of null

.ts, , , .

, , . ngInit - . : -)

+2

, https://angular.io/docs/ts/latest/guide/router.html#!#child-routing-component .

, RouterModule.forChild(routes) @NgModule

exports: [
    RouterModule
]
0

Source: https://habr.com/ru/post/1667979/


All Articles