Angular 6 - Browser refresh page id gets lost

Question

I am facing an issue where when I refresh a page with an Id at the end I get redirected to the home page of my app. For example, if I am on the following page:

https://example.com/page1/12

and I refresh the browser I get redirected to:

https://example.com rather then the same page getting reloaded.

This only happens pages with id on the end, for example, browser refresh on the following page works fine:

https://example.com/page2

app-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { Page1Component } from './page1/page1.component';
const routes: Routes = [
{
    path: 'page1/:id',
    component: Page1Component,
    canActivate: []
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

app.component.html

<mat-list-item routerLink="page1/{{page.id}}">
            <a matLine>{{page.name}}</a>
          </mat-list-item>