I have a default app.component that contains a button. When this button is clicked, I want to navigate to the login.component.
Below is a snippet from my app.module.ts file:
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing/app-routing.module';
import { AppComponent } from './app.component';
import { MatButtonModule } from '@angular/material/button';
import { MainModule } from './main/main.module';
@NgModule({
declarations: [AppComponent],
imports: [BrowserModule, MatButtonModule, MainModule, AppRoutingModule],
providers: [],
bootstrap: [AppComponent],
})
export class AppModule {}
And here is a snippet from my app-routing.module.ts file:
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { LoginComponent } from '../main/login/login.component';
const routes: Routes = [
{ path: 'main', children: [{ path: 'login', component: LoginComponent }] },
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule],
})
export class AppRoutingModule {}
In order to achieve this navigation, I used the following code:
<button mat-raised-button class="btn-default" [routerLink]="['/main/login']">Log in</button>To see the code in action, you can visit the following Stackblitz link.
My issue is that although the URL changes to localhost:4200/main/login, the view does not update accordingly. How can I resolve this?