I've already read all solutions regarding this on portal, but couldn't find the right solution. The thing is like this:
I have one component:
import {Component} from '@angular/core';
@Component({
selector: 'component-one',
template: 'Component One'
})
export class ComponentOne {
}
and two child components:
import { Component } from '@angular/core';
@Component({
selector: 'child-one',
template: 'Child One'
})
export class ChildOne {
}
import { Component } from '@angular/core';
@Component({
selector: 'child-two',
template: `
<nav>
<a [routerLink]="['child-one']">Child One</a><br />
<a [routerLink]="['child-two']">Child two</a><br />
</nav>
<router-outlet></router-outlet>
`
})
export class ChildTwo {
}
What I want to achieve when you click on ComponentOne route is that I'm redirected to child-two component which contains template with another router outlet.
this is how routes look:
import { Routes, RouterModule } from '@angular/router';
import ComponentOne from './component-one';
import ComponentTwo from './component-two';
import ChildOne from './child-one';
import ChildTwo from './child-two';
export const routes: Routes = [
{ path: '', redirectTo: 'component-two', pathMatch: 'full' },
{ path: 'component-two', component: ComponentTwo },
{ path: 'component-one', component: ComponentOne,
children: [
{ path: '', redirectTo: 'child-two', pathMatch: 'full' },
{ path: 'child-one', component: ChildOne },
{ path: 'child-two', component: ChildTwo }
]
}
];
export const appRoutingProviders: any[] = [
];
export const routing = RouterModule.forRoot(routes);
In app.component.html I have:
import {Component} from '@angular/core';
import { Router } from '@angular/router';
@Component({
selector: 'app',
template: `
<nav>
<a [routerLink]="['/component-one']">Component One</a>
<a [routerLink]="['/component-two']">Component Two</a>
</nav>
<div style="color: green; margin-top: 1rem;">Outlet:</div>
<div style="border: 2px solid green; padding: 1rem;">
<router-outlet></router-outlet>
</div>
`
})
export class AppComponent {
}
The error I've got is:
Uncaught (in promise): Error: Cannot find primary outlet to load 'ChildTwo'
Error: Cannot find primary outlet to load 'ChildTwo'
Does anyone know what the problem is? I added router outlet inside child-two component and also inside app.component.
If someone needs to know, this is the structure of application:
Thank you!