I am trying to make a router link which is used for a multi step form wizard. I have an outlet of wizard of all of the links inside of my routes.module.ts
.
I have then got a nav.component.html
where I am trying to get the steps for the wizard however I am constantly getting an error of
Cannot match any routes. URL Segment: 'wizard/database-configuration'
This is my routes.module.ts
file:
import {NgModule} from '@angular/core';
import {Routes, RouterModule} from '@angular/router';
import {StepsSiteComponent} from './components/setup-wizard/steps/site/site.component';
import {StepsUserComponent} from './components/setup-wizard/steps/user/user.component';
import {StepsDatabaseComponent} from './components/setup-wizard/steps/database/database.component';
import {StepGuardService} from './services/step-guard.service';
export const appRoutes: Routes = [
{
path: 'wizard/site-settings',
component: StepsSiteComponent,
outlet: 'wizard'
},
{
path: 'wizard/database-configuration',
component: StepsDatabaseComponent,
canActivate: [StepGuardService],
outlet: 'wizard',
},
{
path: 'wizard/admin-user-settings',
component: StepsUserComponent,
canActivate: [StepGuardService],
outlet: 'wizard'
},
{
path: '',
pathMatch: 'full',
redirectTo: 'wizard/site-settings',
}
];
@NgModule({
imports: [RouterModule.forRoot(appRoutes, {useHash: true})],
exports: [RouterModule],
providers: [StepGuardService]
})
export class RoutesModule {}
I am then registering this inside of my app.module.ts
file.
imports: [
BrowserModule,
FormsModule,
HttpModule,
RoutesModule
],
I also have this inside of my nav.component.html
.
<ul>
<li>
<a [routerLink]="['/wizard/database-configuration', {outlets: { 'wizard': ['/wizard/database-configuration']}}]" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }" data-toggle="tab" title="Database Configuration">
Database Configuration
</a>
</li>
</ul>