Angular 原因是什么；出口未被激活”；错误

我正在尝试在我的webapp中创建一个由4个步骤组成的工作流，当我加载应用程序时，我可以毫无问题地从步骤1导航到步骤4，然后，我返回到步骤1而不重新加载应用程序，我执行相同的路径，从步骤1到步骤4，到达步骤4（第二次），我得到一个

出口未激活

错误，如下所示。这个错误的结果是，我的任何数据都显示在步骤4中。 所以我的问题是什么会导致这个错误

这里是错误

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)

从'@angular/router'导入{RouterModule，Routes}；
从“./wizard.component”导入{WizardComponent}；
从“@angular/core”导入{NgModule}；
从“./wizard.guard”导入{WizardGuard}；
从“./steps/architecture step/architecture step.guard”导入{ArchitectureStepRouteGuard}；
导出常量路由：路由=[
{
路径：“”，
组件：向导组件，
可激活：[向导守卫]，
儿童：[
{
路径：“”，
重定向到：“项目名称步骤”，
路径匹配：“已满”
},
{
路径：“项目名称步骤”，
数据：{步骤编号：1}，
loadChildren:（）=>import（'./steps/project name step/project name step.module'）。然后（m=>m.projectnamestepmode）
},
{
路径：“架构步骤/：id”，
数据：{stepNumber:2}，
loadChildren:（）=>import（'./steps/architecture-step/architecture-step.module'）。然后（m=>m.ArchitectureStepModule），
激活：[架构StepRouteGuard]
},
{
路径：“调整步骤/：id”，
数据：{步骤编号：3}，
加载子项：（）=>导入（'./步骤/调整步骤/调整步骤.module'）。然后（m=>m.AdjustmentsStepModule）
},
{
路径：“结果步骤/：id”，
数据：{步骤编号：4}，
loadChildren:（）=>import（'./steps/results-step/results-step.module'）。然后（m=>m.results-stepmode）
}
]
}
];
@NGD模块({
导入：[RouterModule.forChild（路由）]，
导出：[路由模块]
})
导出类向导路由模块{
}

向导.module.ts

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

@Component({
  selector: 'app-wizard',
  templateUrl: './wizard.component.html',
  styleUrls: ['./wizard.component.scss']
})
export class WizardComponent {
}

从'@angular/common'导入{CommonModule}；
从“@angular/core”导入{NgModule}；
从'@angular/forms'导入{FormsModule}；
从'@ngrx/effects'导入{EffectsModule}；
从'@ngrx/store'导入{StoreModule}；
从'@ngx translate/core'导入{TranslateModule}；
从“./steps/adjustments-step/adjustments-step/adjustments-step.guard”导入{AdjustmentsStepRouteGuard}；
从“./steps/architecture step/architecture step.guard”导入{ArchitectureStepRouteGuard}；
从“./steps/project name step/project name step.guard”导入{ProjectNameStepRouteGuard}；
从“./steps/results-step/results-step.guard”导入{ResultsStepRouteGuard}；
从“/store/wizard”导入*作为从WizardStore导入；
从“/store/TSEProject”导入*作为从tseprojectstore导入；
从“./store/TSEProject/effects/TSEProject.effects”导入{tseprojectseeffects}；
从“./wizard steps/wizard steps.component”导入{WizardStepsComponent}；
从“./wizard.component”导入{WizardComponent}；
从“./wizard.routing.module”导入{WizardRoutingModule}；
从“./wizard-navigation/wizard-navigation.module”导入{WizardNavigationModule}；
@NGD模块({
进口：[
公共模块，
FormsModule，
向导路由模块，
StoreModule.forFeature（'wizard'，来自WizardStore.reducer），
StoreModule.forFeature（'TSEProject'，来自tseprojectstore.reducer），
EffectsModule.forFeature（[TSEProjectsEffects]），用于，
TranslateModule，
向导导航模块
],
声明：[WizardComponent，WizardStepsComponent]，
提供者：[项目名称StepRouteGuard、架构StepRouteGuard、调整StepRouteGuard、结果StepRouteGuard]
})
导出类向导模块{
}

看起来您的路线没有

组件

，

重定向到

或

子项

：

尝试将某些组件添加到空路由：

{ path: '', component: FooComponent, pathMatch: 'full' },

更新：

它看起来像一个小男孩

尝试添加一些

foo

，而不是空路径：

export const routes: Routes = [
{
    path: 'foo',
    component: WizardComponent,
    canActivate: [WizardGuard],
    children: [
        // ...the other code is omitted for the brevity
    ]
}  

然后重写url:

<a [routerLink]="['wizard/load']"> Wizard </a>

向导

为什么要在wizard.component.htmlSorry，我忘了说我的“4步向导”在一个更大的应用程序中，所以我通过这个路由器outletAdd RouterModule显示我的步骤，并在模块中添加RouterModule和routes in in moduleThank供您回答，我用routes信息编辑了我的帖子，路由似乎定义得很好，奇怪的是，这个错误只有在我第二次执行步骤时才会出现，但第一次一切都很好。@Agudolive你能给我看一下

wizard.module.ts

？或者在我的帖子中添加了源代码时出现了一些可复制的错误，项目很大，我不知道是什么导致了错误，所以Stackblitz现在很难使用这个.router.navigate（['adjustments-step'，a.project.id]，{relativeTo:a.route.parent.parent}）我如何将它调整到我的新url（使用

foo

）@Agudolive尝试添加这样的内容

['adjustments-step'，'foo'，a.project.id]，{relativeTo:a.route.parent.parent}）

<a [routerLink]="['wizard/load']"> Wizard </a>