CODEWITHSUNDEEP
angularrouteslazy-loadingangular6router-outlet
medfarjallah
medfarjallah

Reputation: 43

Cannot activate an already activated outlet angular 6

My project uses 2 Modules for the moment the indexModule and Sign-In module. The problem is, when I call the lazyloaded module and add to it the outlet name it shows me a problem

cannot activate the loaded outlet

//Index Module

import {BrowserModule} from '@angular/platform-browser';
import {NgModule} from '@angular/core';
import {NavbarComponent} from './02_navbar_component/navbar.component';
import {IndexComponent} from './01_index_component/index.component';
import {SliderComponent} from './03_slider_component/slider.component';
import {SlideshowModule} from 'ng-simple-slideshow';
import {PageComponent} from './04_page_component/page.component';
import {BottomComponent} from './05_bottom_component/bottom.component';
import {SharedModule} from '../shared_Module/shared.module';
import {RouterModule, Routes} from '@angular/router';
import { RouterComponent } from './00_router_component/router.component';
import { ContainerComponent } from './06_container_component/container.component';

const routes: Routes = [{
    path: '',
    component: IndexComponent,
    children: [{
        path: '',
        component: ContainerComponent,
        outlet: 'container'
      },
      {
        path: 'sign-in',
        loadChildren: './../signIn_Module/sign-in.module#SignInModule'
      },
      {
        path: '**',
        redirectTo: '',
        pathMatch: 'full'
      }
    ]
  },
  {
    path: '**',
    redirectTo: '',
    pathMatch: 'full'
  }
];
@NgModule({
  declarations: [
    NavbarComponent,
    IndexComponent,
    SliderComponent,
    PageComponent,
    BottomComponent,
    RouterComponent,
    ContainerComponent,
  ],
  imports: [
    BrowserModule,
    SlideshowModule,
    SharedModule,
    RouterModule.forRoot(routes),
  ],
  exports: [RouterModule],
  providers: [],
  bootstrap: [RouterComponent]
})
export class IndexModule {}

//Sign-In Module

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { SignInComponent } from './01_signIn_component/sign-in.component';
import {RouterModule, Routes} from '@angular/router';

const signRoutes: Routes = [{
  path: '',
  component: SignInComponent,
  outlet: 'container'
}];

@NgModule({
  imports: [
    CommonModule,
    RouterModule.forChild(signRoutes)
  ],
  declarations: [SignInComponent]
})
export class SignInModule {}

/Component/

<ul>
  <li><a href="">Insctructor</a></li>
  <li><a href="">Former</a></li>
  <li><a href="">Sign Up</a></li>
  <li><a routerLink="/sign-in">Log in</a></li>
</ul>
<app-navbar></app-navbar>
<router-outlet name="container"></router-outlet>
<app-footer></app-footer>

Upvotes: 1

Views: 7202

Answers (1)

Jonathan Cummings
Jonathan Cummings

Reputation: 21

You need to add pathMatch: 'full' to the route definition for ContainerComponent.

What's happening is the ContainerComponent route is a prefix of your SignInComponent route. This causes the router to activate both routes when the SignInComponent route is visited. Since both of these routes specify the same outlet, the router-outlet is activated twice with 2 different components. By adding pathMatch: 'full', the ContainerComponent route will not be activated when visiting a route that uses its path as a prefix.

Upvotes: 2

Related Questions