As I work on developing a workflow with 4 steps in my web application, I encounter an issue when navigating from step 1 to step 4 and then back to step 1 without reloading the application. Upon repeating the path from step 1 to step 4 for the second time, I encounter an Outlet is not activated error. This error is preventing the data from being displayed on step 4. What could be causing this error?
Below is the error message:
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 (<anonymous>)
at freeze (http://localhost:4200/vendor.js:115111:40)
at http://localhost:4200/vendor.js:115124:17
at Array.forEach (<anonymous>)
at freeze (http://localhost:4200/vendor.js:115111:40)
at http://localhost:4200/vendor.js:115124:17
at Array.forEach (<anonymous>)
at freeze (http://localhost:4200/vendor.js:115111:40)
wizard.component.html
<app-wizard-steps></app-wizard-steps>
<router-outlet></router-outlet>
wizard.component.ts
import {Component} from '@angular/core';
@Component({
selector: 'app-wizard',
templateUrl: './wizard.component.html',
styleUrls: ['./wizard.component.scss']
})
export class WizardComponent {
}
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: () => import('./steps/project-name-step/project-name-step.module').then(m => m.ProjectNameStepModule)
},
{
path: 'architecture-step/:id',
data: {stepNumber: 2},
loadChildren: () => import('./steps/architecture-step/architecture-step.module').then(m => m.ArchitectureStepModule),
canActivate: [ArchitectureStepRouteGuard]
},
{
path: 'adjustments-step/:id',
data: {stepNumber: 3},
loadChildren: () => import('./steps/adjustments-step/adjustments-step.module').then(m => m.AdjustmentsStepModule)
},
{
path: 'results-step/:id',
data: {stepNumber: 4},
loadChildren: () => import('./steps/results-step/results-step.module').then(m => m.ResultsStepModule)
}
]
}
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class WizardRoutingModule {
}
wizard.module.ts
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 {
}