Angular routerlink not working , but if realod it works

Question

i'm creating a angular 10 app, but i get in trouble, just because routerlink directive partially works. if i click on a link, routerlink directive change url in browser navigation bar, but no component is shown. if i navigate with the browser to a route, or if i push F5 to realod the page, all routerlinks start working well. tha's happen when login module finished login and navigate to url with this directive:

this.router.navigateByUrl('/');

here my app-routing.modules.ts:

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { HomeComponent } from './home';
import { AuthGuard } from './_helpers';
import {CronologiaComponent} from './cronologia';
import {PeriodoComponent} from './periodo';

const accountModule = () => import('./account/account.module').then(x => x.AccountModule);

const routes: Routes = [
    { path: '', component: HomeComponent, canActivate: [AuthGuard], pathMatch: 'full' },
    { path: 'account', loadChildren: accountModule },
    { path: 'cronologia', component: CronologiaComponent, canActivate: [AuthGuard] },
    { path: 'periodo', component: PeriodoComponent, canActivate: [AuthGuard] },

    // otherwise redirect to home
    { path: '**', redirectTo: '' }
];

@NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule]
})
export class AppRoutingModule { }

in app.component.html

<li class="sidebar-item  ">
          <a  routerLink="/periodo"   class='sidebar-link' >
            <i class="bi bi-clock-history"></i>
            <span>Periodo</span>
          </a>
</li>

Cal anyone help me please? what am I doing wrong?

Answer 1

solved, just two router-outlet in app.component.hmtl