I am new to posting here and feeling quite desperate. Currently, I am working with Angular 7 and facing an issue. The problem arises when I manually enter the desired URL, everything works perfectly. However, when I use RouterLink by clicking a button, the URL changes but the page does not respond. Interestingly, after reloading the page by pressing F5, the new URL works fine, indicating that it is not a URL routing problem.
At the moment, I have only implemented the routerLink in two buttons in the cities-nav section for testing purposes. Additionally, I have added a temporary one in the app-component.html as a backup solution, but it also does not work.
There are no errors shown in the console. Moreover, I have a console.log within the onInit function of the cities-nav component, which triggers when the web page loads for the first time, but not when using routerLink.
I have also attempted to execute a method with a (click) event, but even that does not work.
Here is my code:
My app.component.html:
<div style="text-align:center">
<nav>
<a routerLink="/">Go home</a>
</nav>
</div>
<router-outlet></router-outlet>
This is my app-routing.module:
import { NgModule } from "@angular/core";
import { Routes, RouterModule } from "@angular/router";
import { CitiesNavComponent } from './cities-nav/cities-nav.component';
const routes: Routes = [
{ path: "", redirectTo: "cities/Madrid", pathMatch: "full" },
{ path: "cities/:name", component: CitiesNavComponent }
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule {}
This is my cities-nav.component.html:
<div class="container">
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
<header class="mdl-layout__header">
<div class="mdl-layout__header-row">
<span *ngIf="cityName" class="mdl-layout-title">{{this.cityName}}</span>
<div class="mdl-layout-spacer"></div>
</div>
</header>
<div class="mdl-layout__drawer">
<span class="mdl-layout-title">Cities</span>
<nav class="mdl-navigation">
<a class="mdl-navigation__link" routerLink="/cities/Madrid" routerLinkActive="active">Madrid</a>
<a class="mdl-navigation__link" routerLink="/cities/Barcelona">Barcelona</a>
<a class="mdl-navigation__link" (click)="goToCadiz()">Valencia</a>
<a class="mdl-navigation__link" href="">Cádiz</a>
<a class="mdl-navigation__link black-text" href="">ABOUT</a>
</nav>
</div>
<main class="mdl-layout__content">
<div class="page-content"><app-content *ngIf="cityName" [cityName]="this.cityName"></app-content></div>
</main>
</div>
</div>
This is my cities-nav.component.ts:
import { Component, OnInit, NgZone } from "@angular/core";
import { Location } from "@angular/common";
import { ActivatedRoute } from "@angular/router";
import { Router } from "@angular/router";
@Component({
selector: "app-cities-nav",
templateUrl: "./cities-nav.component.html",
styleUrls: ["./cities-nav.component.scss"]
})
export class CitiesNavComponent implements OnInit {
cityName: string;
constructor(
private location: Location,
private route: ActivatedRoute,
private router: Router,
private ngZone: NgZone
) {}
ngOnInit() {
console.log("Cities nav component OnInit executed");
this.cityName = this.route.snapshot.paramMap.get("name");
}
goToCadiz() {
this.ngZone.run(() => {
this.router.navigateByUrl('/cities/Cadiz');
});
}
}
View the first screenshot of tracing View the second screenshot of tracing