Link routing in Angular2

Question

I'm new to Angular 2, and I'm still in the training phase, but I ran into a problem and didn't get a solution. Please, help.

I made a login view, and then a link to it after clicking the link that will be redirected to the main page, and then clicking the link there, it will be redirected to another view.

The following is my code structure:

app.routing.ts:

import { Routes } from '@angular/router';
import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
import { LoginComponent } from './login/login.component';
import { UsersComponent } from './users/usercomponent';

export const routes: Routes = [
    { path: 'Home', component: HomeComponent },
    { path: 'Login', component: LoginComponent },
    { path: 'User', component: UsersComponent },

];

app.module.ts:

import { FormsModule } from '@angular/forms';

import { routes } from './app.routing';
import { LoginComponent } from './login/login.component';
import { HomeComponent } from './home/home.component';
import { UsersComponent } from './users/usercomponent';

@NgModule({
    imports: [BrowserModule, FormsModule, RouterModule.forRoot(routes)],
    declarations: [AppComponent, LoginComponent, HomeComponent, UsersComponent],
    bootstrap: [AppComponent]
})
export class AppModule { } 

app.component.ts:

import { Component } from '@angular/core';
import { OnInit } from '@angular/core';

@Component({
    selector: 'app-initializer',
    templateUrl: './app.component.html'

})


export class AppComponent {
    title = 'Some NAme'
} 

app.component.html:

<a routerLink="Login">Login</a>
<br />
<div>
    <router-outlet></router-outlet>
</div>

login.component.ts:

import { Component } from '@angular/core';

@Component({
    selector: 'login',
    template: `
    <h1><a routerLink="Home">Home</a>
<a routerLink="User">Users</a></h1>
<div>
    <router-outlet></router-outlet>
</div>
  `
})
export class LoginComponent {
    constructor() {

    }
}

The first page works, but after clicking on it it gives an error:

Cannot match any routes. URL Segment: 'Login/Home

I know that the link will look like / login, / home, etc. I don’t like / login / home, but how to implement it, because I do not get a solution for it, and I'm completely new to it.

Answer 1

, <h1><a routerLink="Home">Home</a> / , <h1><a routerLink="/Home">Home</a>.