Angular Router does not load my component despite correct URL

Question

I'm trying to load my Angular component with my router, but it never shows up nor throws an error.

app-routing-module

  { path: '', redirectTo: '/home', pathMatch: 'full' },
  {
    path: 'home', component: HomeComponent, children:
      [
        { path: 'compare', component: CompareComponent, children:[] },
        {
          path: 'settings', component: SettingsComponent, children: [
            { path: 'new', component: ServerConnectionEditComponent }
          ]
        },
      ]
  },

app-server-connections

  constructor(private router:Router, private route:ActivatedRoute) { }
  onAddServer()
  {
    console.log(this.route.url)
    this.router.navigate(['new'], {relativeTo: this.route});
  }

It seems the URL is valid, because any other URL throws an error.

app-server-connection-edit

  ngOnInit() {
    console.log("in Edit") //never gets here
  }

server-connections.component.html

...
<th scope="col"><button type="button" class="btn btn-success btn-sm"
                  (click)="onAddServer()">+</button></th>

app-component.html

<app-header></app-header>
<div class="container">
  <div class="row">
    <div class="col-md-12"> 
      <router-outlet></router-outlet>
    </div>
  </div>
</div>

settings.component.html

<div class="container">
  <div class="row">
    <div>
      <div class="col-md-12" >
        <h4>Server Connections:</h4>
      </div>
      <br/>
      <div class="col-xs-12">
          <app-server-connections [serverConnections]="serverConnections"></app-server-connections>
      </div>
    </div>
  </div>
</div>

Do you have enough <router-outlet>'s set up? Remember that when using children, each parent component needs a <router-outlet> in its template. — Will Alexander
– Will Alexander, Commented Aug 11, 2019 at 10:05
If I add <router-outlet> the component loads right away, and I want it to load on button click. — Zion Hai
– Zion Hai, Commented Aug 11, 2019 at 10:07

Tony · Accepted Answer · 2019-08-11 22:47:35Z

2

You can only have 1 level nested child in your route. So change your route like this. If this is not work open browser console to see if it there any error

{
    path: 'home', component: HomeComponent, children:
    [
        { path: 'compare', component: CompareComponent },
        {
            path: 'settings/new', component: ServerConnectionEditComponent

        },
        { path: 'settings', component: SettingsComponent }
    ]
}

And make sure add <router-outlet></router-outlet> inside your app.component.html

edited Aug 11, 2019 at 22:47

answered Aug 11, 2019 at 10:08

Tony

20.3k7 gold badges42 silver badges62 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Zion Hai Over a year ago

Now it just loads my copmonent instead of my ServerConnectionsComponent instead of next to it.

Zion Hai Over a year ago

settings.component.html

<div class="container">   <div class="row">     <div>       <div class="col-md-12" >         <h4>Server Connections:</h4>       </div>       <br/>       <div class="col-xs-12">           <app-server-connections [serverConnections]="serverConnections"></app-server-connections>       </div>     </div>   </div> </div>

server-connections.component.html ``` ... <th scope="col"><button type="button" class="btn btn-success btn-sm" (click)="onAddServer()">+</button></th> </tr> ```

Tony Over a year ago

just change the route order i just update my answer

Zion Hai Over a year ago

Thanks! Much appreciated

Zaffer Over a year ago

This worked, but how do you go further levels down?

Nabel · Accepted Answer · 2019-08-11 10:10:40Z

1

The more specific must come in order before the less specific. So, settings/new must be in order before settings.

answered Aug 11, 2019 at 10:10

Nabel

1,95617 silver badges24 bronze badges

Collectives™ on Stack Overflow

Angular Router does not load my component despite correct URL

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related