CODEWITHSUNDEEP
angular
Ibanez1408
Ibanez1408

Reputation: 5058

Component does not load on the intended router outlet

This is a duplicate of my question but I have made the question a little clearer. I have 2 routing admin-layout.routing.ts and parameter.routing.ts in the admin-layout.routing.ts I have a path for property.component.ts and it has a child called parameter.component.ts. In this parameter.component.ts I have a router outlet where I want the soa-date.component.ts to come out. I can get to the soa-date.component.ts but it's not showing in the intended second router-outlet. It just comes out on the first router-outlet. I don't have any errors either.

admin-layout.routing.ts

{ path: 'property',       component: PropertyComponent, canActivate: [AuthGuard],
    children: [
        { path: '', component: ParametersComponent,
            loadChildren: '../../property/parameters/parameters.module#ParmetersModule'
        }
    ]
},
{ path: 'person',         component: PersonComponent, canActivate: [AuthGuard] }

parameters.routing.ts

import { Routes } from '@angular/router';
import { SoaDateComponent } from './soa-date/soa-date.component';

export const ParametersRoutes: Routes = [
    { path: 'soadate', component: SoaDateComponent }
];

parameters.module.ts

@NgModule({
    imports: [
        CommonModule,
        RouterModule.forChild(ParametersRoutes),
    ],
    declarations: [
        SoaDateComponent
    ]
})

export class ParmetersModule { }

parameters.component.html

<a [routerLink]="['/soadate']" routerLinkActive="active" >SOA DATE</a>
<router-outlet name="paramOutlet"></router-outlet>

I need your help. Thank you.

Upvotes: 0

Views: 171

Answers (1)

yashpatelyk
yashpatelyk

Reputation: 429

As there's not enough code to dubug this issue, I have created a stackblitz from what I understood the problem is. I think you need to create a parent-children structure here to achieve what you are looking for.

And one more thing are you including ParametersComponent in declarations of any component?

Anyways here's the stackblitz,

https://stackblitz.com/edit/angular-yashpatelyk-routing-inap6y

If I am not wrong here's what you are trying to achieve,

App > PropertyComponent > ParametersComponent > SoaDateComponent

In my example click on the links that show up and you will see above stucture i.e SoaDateComponent is getting loaded in ParametersComponent correctly. The code that might help you is in parameters.module.ts

Upvotes: 1

Related Questions