Help with modifying a pre-made open source web application

[honest plover]

Hello. So, I'm relatively new to angular and web development as a whole, and have been given a task at my internship where I'm given an open source web application with multiple pages selected through its navigation bar, and asked to add an extra route to my own page that I'm developing to its navigation bar.

I'm currently struggling to make sense of the pre-made code with its various components, routes, functions, etc, and the codebase being massive overall to figure out where I need to add what. Are there any tips on how to use AngularDev Tools in inspecting element to help with this?
(Ping me if I need to give more details to help more thoroughly)

[mellow lantern]

Hello, can you share the repo of the open source application?

[honest plover]

https://github.com/yamcs/yamcs

[mellow lantern]

in the browser, you can right click and inspect on the navigation bar to find the closest parent angular selector (such as app-navigation-bar or anything related). By searching for it in the codebase, you'll be able to find the related angular component code.

[honest plover]

So, I've added the Open GUI into this nav, and am now trying to figure out routing of it. Am I correct that I should be looking for the RouterOutlet and importing this component there? Or should I be searching by <mat-sidenav-content>? Since searching RouterOutlet shows no results in vscode (as shown in 2nd image), and 3rd image's method of routing is what i'm used to, using the 6th line imports. The YAMCS webapp doesn't seem to use imports as a list though, so I'm assuming it's a different importing convention being used?