title: What is causing "Outlet is not activated" error
body: <p>I'm trying to create a workflow of 4 steps in my webapp, when I load the app, I can navigate from step 1 to step 4 without problem, then, I go back to step 1 without reloading the app and I do the same path from step 1 to step 4, arriving to step 4 (for the second time), I got a <code>Outlet is not activated</code> error as shown below. The resulting of this error is that any of my datas are shown on the step 4.
  So my question is What could cause that error ?</p>
  
  <p>Here is the error</p>
  
  <pre><code>ERROR Error: Outlet is not activated
      at Object.get component [as component] (http://localhost:4200/vendor.js:110083:19)
      at http://localhost:4200/vendor.js:115121:37
      at Array.forEach (&lt;anonymous&gt;)
      at freeze (http://localhost:4200/vendor.js:115111:40)
      at http://localhost:4200/vendor.js:115124:17
      at Array.forEach (&lt;anonymous&gt;)
      at freeze (http://localhost:4200/vendor.js:115111:40)
      at http://localhost:4200/vendor.js:115124:17
      at Array.forEach (&lt;anonymous&gt;)
      at freeze (http://localhost:4200/vendor.js:115111:40)
  </code></pre>
  
  <p><strong>wizard.component.html</strong></p>
  
  <pre><code>&lt;app-wizard-steps&gt;&lt;/app-wizard-steps&gt;
  &lt;router-outlet&gt;&lt;/router-outlet&gt;
  </code></pre>
  
  <p><strong>wizard.component.ts</strong></p>
  
  <pre><code>import {Component} from '@angular/core';
  
  @Component({
    selector: 'app-wizard',
    templateUrl: './wizard.component.html',
    styleUrls: ['./wizard.component.scss']
  })
  export class WizardComponent {
  }
  </code></pre>
  
  <pre class="lang-js prettyprint-override"><code>import {RouterModule, Routes} from '@angular/router';
  import {WizardComponent} from './wizard.component';
  import {NgModule} from '@angular/core';
  import {WizardGuard} from './wizard.guard';
  import {ArchitectureStepRouteGuard} from './steps/architecture-step/architecture-step.guard';
  
  export const routes: Routes = [
    {
      path: '',
      component: WizardComponent,
      canActivate: [WizardGuard],
      children: [
        {
          path: '',
          redirectTo: 'project-name-step',
          pathMatch: 'full'
        },
        {
          path: 'project-name-step',
          data: {stepNumber: 1},
          loadChildren: () =&gt; import('./steps/project-name-step/project-name-step.module').then(m =&gt; m.ProjectNameStepModule)
        },
        {
          path: 'architecture-step/:id',
          data: {stepNumber: 2},
          loadChildren: () =&gt; import('./steps/architecture-step/architecture-step.module').then(m =&gt; m.ArchitectureStepModule),
          canActivate: [ArchitectureStepRouteGuard]
        },
        {
          path: 'adjustments-step/:id',
          data: {stepNumber: 3},
          loadChildren: () =&gt; import('./steps/adjustments-step/adjustments-step.module').then(m =&gt; m.AdjustmentsStepModule)
        },
        {
          path: 'results-step/:id',
          data: {stepNumber: 4},
          loadChildren: () =&gt; import('./steps/results-step/results-step.module').then(m =&gt; m.ResultsStepModule)
        }
      ]
    }
  ];
  
  @NgModule({
    imports: [RouterModule.forChild(routes)],
    exports: [RouterModule]
  })
  export class WizardRoutingModule {
  }
  
  </code></pre>
  
  <p><strong>wizard.module.ts</strong></p>
  
  <pre class="lang-js prettyprint-override"><code>import {CommonModule} from '@angular/common';
  import {NgModule} from '@angular/core';
  import {FormsModule} from '@angular/forms';
  import {EffectsModule} from '@ngrx/effects';
  import {StoreModule} from '@ngrx/store';
  import {TranslateModule} from '@ngx-translate/core';
  import {AdjustmentsStepRouteGuard} from './steps/adjustments-step/adjustments-step.guard';
  import {ArchitectureStepRouteGuard} from './steps/architecture-step/architecture-step.guard';
  import {ProjectNameStepRouteGuard} from './steps/project-name-step/project-name-step.guard';
  import {ResultsStepRouteGuard} from './steps/results-step/results-step.guard';
  import * as fromWizardStore from './store/wizard';
  import * as fromTSEProjectStore from './store/TSEProject';
  import {TSEProjectsEffects} from './store/TSEProject/effects/TSEProject.effects';
  import {WizardStepsComponent} from './wizard-steps/wizard-steps.component';
  import {WizardComponent} from './wizard.component';
  import {WizardRoutingModule} from './wizard.routing.module';
  import {WizardNavigationModule} from './wizard-navigation/wizard-navigation.module';
  
  @NgModule({
    imports: [
      CommonModule,
      FormsModule,
      WizardRoutingModule,
      StoreModule.forFeature('wizard', fromWizardStore.reducer),
      StoreModule.forFeature('TSEProject', fromTSEProjectStore.reducer),
      EffectsModule.forFeature([TSEProjectsEffects]),
      TranslateModule,
      WizardNavigationModule
    ],
    declarations: [WizardComponent, WizardStepsComponent],
    providers: [ProjectNameStepRouteGuard, ArchitectureStepRouteGuard, AdjustmentsStepRouteGuard, ResultsStepRouteGuard]
  })
  export class WizardModule {
  }
  </code></pre>