Hey I'm having this problem and I cant seem to figure out what is wrong, basically I have a routerLink that goes to a child route, the url changes to the route I want but the view doesn't update to the ponent that is linked to the child route that is currently active

appponent.ts

<app-header></app-header>
<router-outlet></router-outlet>
<app-footer></app-footer>

html

<div class="wide ponent">
    <div class="page-wrap">
        <img class="logo" src="../../assets/img/our-work-ponent-logo.png"><br>
        <h2>Component Elite</h2>
        <h3>Web portal and promotions</h3>

        <p class="short-description">Lorem Ipsum</p>
        <a routerLink="ponent" class="button orange-button">View More</a>
    </div>
</div>

app.module.ts

import { OurWorkComponent } from './our-work/our-workponent';
import { ComponentComponent } from './our-work-content/ponent/ponentponent'

export const ROUTES: Routes = [
  { path: 'our-work', ponent: OurWorkComponent,
      children: [
         { path: 'ponent', ponent: ComponentComponent }
      ]
  }
];

@ngModule({
  declarations: [
     OurWorkComponent,
     ComponentComponent
  ],
  imports: [
     BrowserModule,
     RouterModule.forRoot(ROUTES)
  ],
  providers: [],
  bootstrap: [AppComponent]
})

Hey I'm having this problem and I cant seem to figure out what is wrong, basically I have a routerLink that goes to a child route, the url changes to the route I want but the view doesn't update to the ponent that is linked to the child route that is currently active

app.ponent.ts

<app-header></app-header>
<router-outlet></router-outlet>
<app-footer></app-footer>

html

<div class="wide ponent">
    <div class="page-wrap">
        <img class="logo" src="../../assets/img/our-work-ponent-logo.png"><br>
        <h2>Component Elite</h2>
        <h3>Web portal and promotions</h3>

        <p class="short-description">Lorem Ipsum</p>
        <a routerLink="ponent" class="button orange-button">View More</a>
    </div>
</div>

app.module.ts

import { OurWorkComponent } from './our-work/our-work.ponent';
import { ComponentComponent } from './our-work-content/ponent/ponent.ponent'

export const ROUTES: Routes = [
  { path: 'our-work', ponent: OurWorkComponent,
      children: [
         { path: 'ponent', ponent: ComponentComponent }
      ]
  }
];

@ngModule({
  declarations: [
     OurWorkComponent,
     ComponentComponent
  ],
  imports: [
     BrowserModule,
     RouterModule.forRoot(ROUTES)
  ],
  providers: [],
  bootstrap: [AppComponent]
})

• javascript
• angular
• typescript

1 Answer 1

Reason it's not changing is because of children of OurWorkComponent

children: [
    { path: 'ponent', ponent: ComponentComponent }
]

This means there should be <router-outlet> in OurWorkComponent, but I can't see it, just add that in OurWorkComponent's html and you are good to go.

For more details please do read : https://angular.io/guide/router#nesting-routes