Search code examples
angularangular-routingangular9

Show Component Based on Routing on Default Address in Angular 9

I'm trying to show one of these components as the default one when my app is loaded:

<!--I want to show this one-->
<app-ms-power-automate *ngIf="router == '/ms-power-automate'"></app-ms-power-automate>
<app-uipath *ngIf="router == '/uipath'"></app-uipath>

I tried this:

<app-ms-power-automate *ngIf="router == '/ms-power-automate' || router == '/'"></app-ms-power-automate>

Or this:

<app-ms-power-automate *ngIf="router == '/ms-power-automate' || router == ''"></app-ms-power-automate>

And they keep showing me an empty view. Any idea what am I doing wrong?

Solution

  • I found a solution to my question, I defined a default Path in the app-routing.module.ts like this:

    { path: '**', component: MsPowerAutomateComponent }

    It's using a Wildcard, more info:

    https://angular.io/guide/router

    Also, I needed to add the hash strategy:

    RouterModule.forRoot(routes, { useHash: true })

    To avoid error 404 errors. Info from here:

    https://medium.com/wineofbits/angular-2-routing-404-page-not-found-on-refresh-a9a0f5786268