Exploring the latest update of Angular 2.x / 4.x - you can find the documentation here

/* typescript */

import { Location } from '@angular/common';
// import required modules

@Component({
// define component properties
})
export class MyComponent {

  // initializing location in component constructor
  constructor(private location: Location) { }

  cancel() {
    this.location.back(); // <-- navigates back to previous location when canceled
  }
}

<button goBack>GO BACK</button>

This code snippet can be encapsulated in a custom directive that enables the functionality on any clickable element:

import { Directive, HostListener } from '@angular/core';
import { Location } from '@angular/common';

@Directive({
    selector: '[goBack]'
})
export class GoBackDirective {
    constructor(private location: Location) { }

    @HostListener('click')
    onClick() {
        this.location.back();
    }
}

To use the directive, simply add it to your HTML element like so:

<button goBack>GO BACK</button>

Angular 5.2.9 Compatibility Tested

If you choose to use an anchor instead of a button in your Angular application, it is important to ensure that it functions as a passive link by setting the href attribute to "javascript:void(0)".

app.component.ts

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent {

  constructor( private location: Location ) { 
  }

  goBack() {
    // window.history.back();
    this.location.back();

    console.log( 'goBack()...' );
  }
}

app.component.html

<!-- anchor must be a passive link -->
<a href="javascript:void(0)" (click)="goBack()">
  <-Back
</a>

If you wish to verify whether the previous point in history is within your app, consider this scenario: If you directly access your app and execute location.back() (e.g., by clicking a <- back button on a toolbar), you will be directed back to your browser's main page instead of staying within your app.

Below is how I address this issue:

import { Component } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { Location } from '@angular/common';

@Component({
  selector: 'app-foo',
  template: ''
})
export class FooComponent {

  private readonly canNavigateBack: boolean;

  constructor(
    private readonly route: ActivatedRoute,
    private readonly router: Router,
    private readonly location: Location
  ) {
    // This is where the navigation check occurs. Ensure it is done
    // within the constructor to prevent `getCurrentNavigation()`
    // from returning null.
    this.canNavigateBack = !!(this.router.getCurrentNavigation()?.previousNavigation);
  }

  navigateBack(): void {
    if (this.canNavigateBack) {
      // We can safely navigate back to the previous location
      // knowing that it is within our app.
      this.location.back();
    } else {
      // No previous navigation available.
      // Decide on the next step. For example, let's assume the
      // index page is one level above, so we navigate up.
      this.router.navigate(['..'], {relativeTo: this.route});
    }
  }

}

We determine if there is a previous sibling in the navigation that loaded the current route. This verification must take place in the constructor while the navigation process is active.

However, there are some drawbacks to this approach:

• canNavigateBack may return false even if the previous location is within our app, but the page was refreshed.
• Users might intend to "go back" to the preceding page (where navigateBack() occurred) by using the browser's back button. Since the app navigated back in history instead of pushing a new location, the user might end up going further back and becoming disoriented.

If you want to access information about the previous route, you can create a routerOnActivate() method in your route class.

routerOnActivate(nextRoute: RouteInstruction, prevRoute: RouteInstruction) : any

After that, you have the option to use router.navigateByUrl() and pass along data from the RouteInstruction. Here is an example:

this._router.navigateByUrl(prevRoute.urlPath);

Hopefully, my response will be as helpful as the other great answers here. I recently crafted a handy tool to monitor route history. Check it out:

import { Injectable } from '@angular/core';
import { NavigationEnd, Router } from '@angular/router';
import { filter } from 'rxjs/operators';

@Injectable()
export class RouteLoggerService {
  private _previousRoute: string;
  private _currentRoute: string;
  private _routeList: string[];

  constructor(router: Router) {
    this._routeList = [];
    router.events
      .pipe(filter(event => event instanceof NavigationEnd))
      .subscribe((event: NavigationEnd) => {
        this._recordRoute(event);
      });
  }

  private _recordRoute(event: NavigationEnd): void {
    const tempRoute = this._currentRoute;
    this._previousRoute = tempRoute;
    this._currentRoute = event.urlAfterRedirects;
    this._routeList.push(event.urlAfterRedirects);
  }

  get previousRoute(): string {
    return this._previousRoute;
  }

  get currentRoute(): string {
    return this._currentRoute;
  }

  get routeList(): string[] {
    return this._routeList;
  }
}

It always comes in handy for me whenever I have to navigate back within the file system. NOTE: @angular version used is "^5.0.0"

<button type="button" class="btn btn-primary" routerLink="../">Go Back</button>

I created a reusable button component for my app.

Below is the code to create this component:

import { Location } from '@angular/common';
import { Component, Input } from '@angular/core';

@Component({
    selector: 'back-button',
    template: `<button mat-button (click)="goBack()" [color]="color">Back</button>`,
})
export class BackButtonComponent {
    @Input() color: string;

  constructor(private location: Location) { }

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

To use this back button in your templates, simply include the following code:

<back-button color="primary"></back-button>

Please note that this example utilizes Angular Material. If you are not using this library, you can remove the mat-button and color attributes.

To easily navigate back in an Angular application using the browser's URL, you can utilize the Location service.

To start using it, first import it:

import { Location } from '@angular/common';

Then inject it into your component:

constructor(private location: Location) { }

Now you can implement going back functionality with ease:

goBack() {
    this.location.back(); // Navigates back in the platform's history
}

When moving to a different page, I found a method to add a query parameter by including the current location.

this.router.navigate(["user/edit"], { queryParams: { returnUrl: this.router.url }

In your component, retrieve and read this query parameter.

this.router.queryParams.subscribe((params) => {
    this.returnUrl = params.returnUrl;
});

If the returnUrl exists, activate the back button. When the user clicks on it,

this.router.navigateByUrl(this.returnUrl); // Idea inspired by Sasxa

This should lead back to the previous page. I believe this approach is safer than using location.back as it prevents unexpected redirects if a user lands directly on your page and presses the back button.

When dealing with RC4 encryption:

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

Ensure that you include the necessary import statements when working with the most recent versions of Angular and TypeScript.

import { Location } from '@angular/common';

Additionally,

 onCancel() {
    this.location.back();
  }

Starting from beta version 18:

import {Location} from 'angular2/platform/common';

If you want to return to the previous page without reloading it, you can use the following HTML snippet: javascript:history.back()

<a class="btn btn-danger" href="javascript:history.back()">Go Back</a>

2022
Instead of relying on the browser's location object for navigation history, consider using your app routing in a more "angular approach". Consider why you want the user to go 'back', and what going 'back' entails within the context of your application and its routes.

For instance, returning to a parent route from its child can be achieved by:

  this.router.navigate(['..'], {relativeTo: this.route});

You can also learn more about previous navigation here

previousNavigation : The previously successful Navigation object. Only one previous navigation is available, therefore this previous Navigation object has a null value for its own previousNavigation.

Imports:

import { Location } from '@angular/common';
import { Router } from '@angular/router';

Constructor:

constructor(private readonly router: Router, private readonly location: Location) {
  location.onUrlChange(() => this.canGoBack = !!this.router.getCurrentNavigation()?.previousNavigation);
}

Optional behavior to prevent going back outside the application:

private canGoBack: boolean = false;

constructor(private router:Router,private location:Location){
  this.canGoBack = !!(this.router.getCurrentNavigation()?.previousNavigation);
}

Function to navigate back:

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

HTML button to trigger navigation back:

<button (click)="goBack()"></button>

To maintain query parameters in Angular 4, you can utilize the preserveQueryParams attribute like so:

url: /list?page=1

<a [routerLink]="['edit', id]" [preserveQueryParams]="true"></a>

By clicking the link, you will be taken to edit/10?page=1, keeping the parameters intact.

For more information, visit: https://angular.io/docs/ts/latest/guide/router.html#!#link-parameters-array

This is the method I am currently using:

import { Location } from '@angular/common'
import { Component, Input } from '@angular/core'

@Component({
    selector: 'Back_button',
    template: `<button (click)="goBack()">Go back</button>`,
})
export class BackButtonComponent {
  constructor(private location: Location) { }

  goBack() {
    this.location.back(); // <-- navigate back to previous page
  }
}

I devised a solution for this issue and it’s worth checking if there exists a prior page. Remember to integrate the service into your appComponent.

import { Injectable } from '@angular/core';
import { Location } from '@angular/common';
import { NavigationEnd, Router } from '@angular/router';

interface HistoryData {
  previousPage: string | null,
  currentPage: string | null,
}

@Injectable({ providedIn: 'root' })
export class GoBackService {

  private historyData: HistoryData = { previousPage: null, currentPage: null };

  constructor(private router: Router, private location: Location) {
    this.router.events.subscribe((event) => {
      if (event instanceof NavigationEnd) {
        this.historyData.previousPage = this.historyData.currentPage;
        this.historyData.currentPage = event.urlAfterRedirects;
      }
    });
  }

  public goBack(): void {
    if (this.historyData.previousPage) this.location.back();
  }

  public canGoBack(): boolean {
    return Boolean(this.historyData.previousPage);
  }

}

To navigate back to the previous window, you have the option of utilizing the History API.

window.history.back();

It is important to note that this API can only be accessed on the main thread (Window) and is not available in Worker or Worklet contexts.

A solution has been found! Insert the following TypeScript code into your component and start reaping the benefits:

import { Location } from '@angular/common'
import { Component, Input } from '@angular/core'

@Component({
    selector: 'return_page',
    template: `<button mat-button (click)="onReturn()">Back</button>`,
})
export class ReturnPageComponent {
  constructor(private location: Location) { }

  onReturn() {
    this.location.back();
  }
}

attempt using routerLink="../FINALPAGE"

Utilize this convenient service which includes a fallback feature to handle empty history situations.

url-back.service.ts

import { Injectable } from '@angular/core';
import { Location } from '@angular/common';

import { Router } from '@angular/router';

const EMPTY_HISTORY_LENGTH = 2;

/**
 * This service allows navigation back to the previous page, or redirects to a fallback URL if there is no previous page.
 */
@Injectable()
export class UrlBackService {
  constructor(private router: Router, private location: Location) {}

  /**
   * Navigates back to the previous page, or redirects to the fallback URL if there is none.
   * @param href - URL, acts as fallback URL if tryNativeFirst is enabled
   * @param tryNativeFirst - attempts native browser history navigation first
   */
  back(href: string, tryNativeFirst: boolean = false) {
    if (tryNativeFirst) {
      if (history.length === EMPTY_HISTORY_LENGTH) {
        this.router.navigate(UrlBackService.urlToArray(href));
      } else {
        this.location.back();
      }
    } else {
      this.router.navigate(UrlBackService.urlToArray(href));
    }
  }

  /**
   * Splits a URL string into an array to prevent issues with router.navigate escaping slashes,
   * and removes unnecessary slashes at the start and end of URLs.
   * @param href
   * @private
   */
  private static urlToArray(href: string) {
    return href.split('/').filter((notEmpty) => notEmpty);
  }
}

url-back.service.spec.ts

import { TestBed } from '@angular/core/testing';

import { UrlBackService } from './url-back.service';
import { Router } from '@angular/router';
import { Location } from '@angular/common';
import { RouterTestingModule } from '@angular/router/testing';

describe('UrlBackService', () => {
  let service: UrlBackService;
  let router: Router;
  let location: Location;

  beforeEach(() => {
    TestBed.configureTestingModule({
      imports: [RouterTestingModule],
      providers: [UrlBackService],
    });
    service = TestBed.inject(UrlBackService);
    router = TestBed.inject(Router);
    location = TestBed.inject(Location);
  });

  it('should be created', () => {
    expect(service).toBeTruthy();
  });

  it('regardless of history state, it should redirect to /my/url', () => {
    spyOn(router, 'navigate');
    service.back('/my/url');
    expect(router.navigate).toHaveBeenCalledWith(['my', 'url']);
  });

  it('if history is empty, it should navigate to /my/url', () => {
    spyOn(router, 'navigate');
    service.back('/my/url', true);
    expect(router.navigate).toHaveBeenCalledWith(['my', 'url']);
  });

  it('if history is NOT empty, it should navigate to url1', () => {
    spyOn(location, 'back');
    window.history.pushState(null, '', 'url1');

    service.back('/my/url', true);
    expect(location.back).toHaveBeenCalled();
  });
});

Here is a modified version based on @Parziphal's answer, specifically for components where no changes are detected:

  import { Location } from '@angular/common';
  import { Router } from '@angular/router';

  constructor(private readonly router: Router, private readonly location: Location) {
    location.onUrlChange(() => this.canGoBack = !!this.router.getCurrentNavigation()?.previousNavigation);
  }

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

Introducing the most recent Angular 14 update. In cases where the previousUrl is not defined, we will navigate to the predetermined URL from before.

import { Location } from '@angular/common';
import { filter, Subject, takeUntil } from 'rxjs';
import { Router, ActivatedRoute, NavigationEnd } from '@angular/router';

private previousUrl: string;
private ngUnsubscribe: Subject<any> = new Subject<any>();

constructor(
    private router: Router,
    private activatedRoute: ActivatedRoute,
    private location: Location
) {
    router.events
        .pipe(
            takeUntil(this.ngUnsubscribe),
            filter((event) => event instanceof NavigationEnd)
        )
        .subscribe((event: NavigationEnd) => {
            this.previousUrl = event.url;
        });
}

public async goBack() : Promise<void> {
   if (this.previousUrl) {
     this.location.back();
   } else {
     await this.router.navigate(['..'], {
         relativeTo: this.activatedRoute,
     });
   }
}

ngOnDestroy(): void {
    this.ngUnsubscribe.next(true);
    this.ngUnsubscribe.complete();
}

After noticing that many responses neglect to consider all aspects of back navigation,
I've developed a compact library that solves the issue.

It covers

1. Browser history
2. Fallback for when clicking the back button before routing
3. Personalized fallback

Setup

npm install ngx-back-button

import { NgxBackButtonModule, NgxBackButtonService } from 'ngx-back-button'

  imports: [
    NgxBackButtonModule.forRoot(), // Default rootUrl === '/'

    // Or
    NgxBackButtonModule.forRoot({
      rootUrl: '/custom', // Or any custom root url
      fallbackPrefix: '/tabs' // For libraries users
    }),
  ],
  providers: [
    {
      provide: APP_INITIALIZER,
      useFactory: () => () => null,
      deps: [NgxBackButtonService],
      multi: true,
    },
  ]

Then whenever you want to go back

// foo.component.ts
import { NgxBackButtonService } from 'ngx-back-button'

// ...
 constructor(public ngxBackButtonService: NgxBackButtonService) {}

 navigateBack() {
  this.ngxBackButtonService.back()
 }

Additionally, it can be used with a directive

<button ngxBackButton>
  Back
</button>