How to keep trailing slash in URL in angular 2 or > in Child Routes?

Question

I want to know how to force the use of final slash in Angular routing. I am using this methodology to maintain the final slash in Angular App, I used this documentation a link!

export const contactUsRoutes: Routes = [
    {
        path: 'contact-us/.', component: ContactUsComponent
    }
];

<a [routerLink]="['/contact-us/.']">Contact us</a>

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

// main.ts
const __stripTrailingSlash = (Location as any).stripTrailingSlash;
(Location as any).stripTrailingSlash = function _stripTrailingSlash(url: string): string {
  const queryString$ = url.match(/([^?]*)?(.*)/);
  if (queryString$[2].length > 0) {
    return /[^\/]\/$/.test(queryString$[1]) ? queryString$[1] + '.' + queryString$[2] : __stripTrailingSlash(url);
  }
  return /[^\/]\/$/.test(url) ? url + '.' : __stripTrailingSlash(url);
};

It works quite well for simple links, however I have a child routes section

const wizardRoutes: Routes = [{
  path: 'page-childs',
  component: WizardComponent,
  children: [
    {
      path: '',
      component: Page1Component,
    },
    {
      path: ':region/.',
      component: Page2Component,
    },
    {
      path: ':region/:origins/.',
      component: Page3Component,
    }
  ]
}];
// main path:  localhost/page-childs/    redirecto to Page1Component
// path Child 1:  localhost/page-childs/usa/    show Page2Component
// path Child 2:  localhost/page-childs/usa/aaa/    show Page3Component

Additionally In WizardComponent I have a router-outlet.

I have problems defining the path 'page-childs' because I need to have the slash at the end, and if I put it ('page-childs /.') in the definition, The routes stop working.

Does anyone know how I should define this?