如何使用 CanActivate routerguard 来控制没有路径的组件的加载

Question

I understand router guards are used to control whether or not a component loads based on some condition. However, they typically are used with routes, which require paths.

My use case is: I have an Angular Fire website that allows users to log in. I want a component to be loaded only once the firebase server has started, because the component involves the auth service (the component being loaded after the server prevents "Error: No Firebase App '[DEFAULT]' has been created - call Firebase App.initializeApp()"). The issue is, this component isn't a dedicated view in the web app, it's just a smaller sidemenu used in a different, larger component. So, this component doesn't have it's own path (ie URL).

I'm only familiar with router guards being used within the routes declaration. So, I tried the below (without specifying a path), and it didn't work (Error: Invalid configuration of route '': routes must have either a path or a matcher specified). How would one handle this? I'm a beginner to Angular so I'm unsure as to the best practices.

const routes: Routes = [
  { component: SidemenuComponent, canActivate: [AngularFireAuthGuard]},
];

Answer 1

You can combine multiple components with a specific URL. For the restricted path just add an empty component or other information that the menu is not available.
App module routes:

const routes: Routes = [
    {
        path: "load",
        canActivate: [ServerDataGuard],
        children: [
            {
                path: "",
                outlet: "primary",
                component: CommonComponent,
            },
            {
                path: "",
                outlet: "data",
                component: ServerDataComponent
            },
        ],
    },
    {
        path: "",
        children: [
            {
                path: "",
                outlet: "primary",
                component: CommonComponent,
            },
            {
                path: "",
                outlet: "data",
                component: EmptyComponent,
            },
        ],
    },
];

Server data guard (for example, filtering by id = 10):

public canActivate(
    _route: ActivatedRouteSnapshot,
    _state: RouterStateSnapshot,
) {
    const params = _route.queryParams;
    return params["id"] == 10;
}

And some HTML sample (outlet 'primary' is a default name):

<table>
    <tr>
        <th>Common</th>
        <th>Server data</th>
    </tr>
    <tr>
        <td><router-outlet></router-outlet></td>
        <td><router-outlet name="data"></router-outlet></td>
    </tr>
</table>
<br />

<a routerLink="/load" [queryParams]="{ id: 10 }">Try load data with id = 10</a><br>
<a routerLink="/load">Try load data without id</a><br>
<a routerLink="/">Back</a>