Cacher is the code snippet organizer for pro developers

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

@Component({
    templateUrl: './list1.component.html',
    selector: 'app-list1'
})
export class List1Component {
}

<!--The content below is only a placeholder and can be replaced.-->
<h1>Test Site</h1>
<nav>
  <a routerLink="/" routerLinkActive="active">Main</a>
  <a routerLink="/hello" routerLinkActive="active">Hello</a>
  <a routerLink="/list1" routerLinkActive="active">List 1</a>
</nav>
<!-- Сюда выводится содержимое из ссылок--->
<router-outlet></router-outlet> 

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

@Component({
  selector: 'app-root', // Куда вынесится модуль в index.html
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app';
}

import { BrowserModule } from '@angular/platform-browser';
import { RouterModule } from '@angular/router'; // для роутинга

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

// Импортируем компоненты
import { AppComponent } from './app.component';
import { HelloWorldListComponent } from './hello-world-list/hello-world-list.component';
import { List1Component} from './list1/list1.component';


@NgModule({
  declarations: [
    AppComponent, HelloWorldListComponent, List1Component // Добавляем компоненты
  ],
  imports: [ // Импортруем модули
    BrowserModule,
      RouterModule.forRoot([ // Настриваем роутинг
        { path: '', redirectTo: 'hello', pathMatch: 'full' },
        { path: 'hello', component: HelloWorldListComponent },
        { path: 'list1', component: List1Component}
      ])
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }