app1.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule, Component, OnInit } from '@angular/core';
import { RouterModule, Router, ActivatedRoute, Routes } from '@angular/router';
import { Location } from '@angular/common';

@Component({
  selector: 'app-page1',
  template: '<h1>Olá, eu sou a página 1</h1>'+
              'Componente:<comp-app1></comp-app1>'
})
export class Page1Component implements OnInit {
  constructor() { }

  ngOnInit() {
  }
}

@Component({
    selector: 'app-page2',
    template: '<h1>Olá, eu sou a mais nova página, página 2</h1>'+
              '<br> Este é um botão vermelho, configurado via SCSS da página atual'+
              '<button class="button" (click)="goBack()">Retornar</button>',
    styles: ['.button {'+
                'background-color: #AA0000;'+
                'border: none;'+
                'color: white;'+
                'padding: 15px 32px;'+
                'text-align: center;'+
                'text-decoration: none;'+
                'display: inline-block;'+
                'font-size: 16px;'+
                'margin: 4px 2px;'+
                'cursor: pointer;'+
            '}']
})
export class Page2Component implements OnInit {
    constructor(
        private location: Location
    ) { }

    ngOnInit() {
    }

    goBack(): void {
        this.location.back();
    }
}


@Component({
    selector: 'app-root',
    template:'<router-outlet></router-outlet>'
})
export class AppComponent {
}

@Component({
    selector: 'comp-app1',
    template:'<p>'+
                'App 1 - Comp 1'+
                '<br>'+
                '<button (click)="showAlert()">Show alert</button>'+
                '<br>'+
                '<button (click)="goToPage2()">Go to page 2</button>'+
              '</p>'
})
export class CompApp1Component implements OnInit {
    constructor(
        private router: Router,
        private activatedRoute: ActivatedRoute
    ) { }

    ngOnInit(): void {
    }

    showAlert(): void {
        alert('ahoy');
    }

    goToPage2(): void {
        console.log('going to page 2');
        console.log('router', this.router);
        console.log('activated route', this.activatedRoute);

        this.router.navigate(['page2']);
    }
}

export const ROUTES: Routes = [
    { path: '', redirectTo: 'page1', pathMatch: 'full' },

    { path: 'page1', component: Page1Component },
    { path: 'page2', component: Page2Component }
];

@NgModule({
    declarations: [
        AppComponent,
        CompApp1Component,
        Page2Component,
        Page1Component
    ],
    imports: [
        BrowserModule,
        RouterModule.forRoot(ROUTES),
    ],
    entryComponents: [
        CompApp1Component
    ],
    exports: [
        AppComponent,
        CompApp1Component,
        Page2Component,
        Page1Component
    ],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule { }