Все синтаксис шаблона Angular2 нарушается, когда я открываю страницу через мой хешированный маршрутизатор

У меня есть хэшированный роутер, который просто прорисовывается с моей главной страницы. Проблема возникает, когда открывается новая страница, все синтаксисы шаблона нарушены. Это все привязки данных, ngFors и даже [routerLink]. Таким образом, страницы открываются без логики angular, но если я обновляю браузер, а на этих хеш-страницах они работают нормально.

app bootstrap file

import { enableProdMode } from '@angular/core';
import { disableDeprecatedForms, provideForms } from '@angular/forms';
import { HTTP_PROVIDERS } from '@angular/http';
import { bootstrap } from '@angular/platform-browser-dynamic';
import { LocationStrategy, HashLocationStrategy } from '@angular/common';
import { APP_ROUTER_PROVIDERS }  from './path-to-the-router-file';
import { ServerGetService } from './path-to-a-service';
import { AppComponent } from './app/app.component';

// depending on the env mode, enable prod mode or add debugging modules
if (process.env.ENV === 'build') {
  enableProdMode();
}

bootstrap(AppComponent, [
  HTTP_PROVIDERS,
  APP_ROUTER_PROVIDERS,
  {
    provide: LocationStrategy,
    useClass: HashLocationStrategy
  },
  ServerGetService,
  disableDeprecatedForms(),
  provideForms()
]).catch((err: any) => console.error(err));

routes file

import {provideRouter, RouterConfig} from '@angular/router';
import {SecondPopUpComponent} from './path-to-the-file';
import {firstPopUpComponent} from './path-to-the-file';
import {Component} from '@angular/core';

@Component({
  selector: 'mx-empty',
  template: '<div></div>'
})
class EmptyComponent {}

export const routes: RouterConfig =
  <RouterConfig>[
    {
      path: 'second-popup',
      component: SecondPopUpComponent
    }, {
      path: 'first-popup',
      component: FirstPopUpComponent
    }, {
      path: '',
      component: EmptyComponent
    }
  ];

export const APP_ROUTER_PROVIDERS = [
  provideRouter(routes)
];

one of my popup screens (with the problem)

import {Component} from '@angular/core';
import {TradePurposeProperty} from './trade-purpose.objects';
import {Router, ROUTER_DIRECTIVES} from '@angular/router';
import {GlobalSettingsData} from '../../services/global-settings-data.service';

@Component({
  selector: 'my-popup',
  templateUrl: './popup.page.html',
  directives: [ROUTER_DIRECTIVES]
})

export class TradePurposePageComponent {
  localData: customData[] = [];

  constructor(private router: Router, private data: GlobalData) {
    if (data.myData) {
      this.localData= data.myData;
    }
  }

  onSubmit() {
    this.data.myData= this.localData;
    this.router.navigate(['']);
  }
}

popup.page.html

<div class="form-popup">
  <div class="form-popup__overlay"></div>
  <div class="form-popup__content">
    <form #dataForm="ngForm" (ngSubmit)="onSubmit()">
      <fieldset>
        <legend>Properties</legend>
        <table>
          <thead>
          <tr>
            <th>first column</th>
            <th>secondcolumn</th>
            <th>third column</th>
          </tr>
          </thead>
          <tbody>
          <tr *ngFor='let data of localData'>
            <td>{{data.attr1}}</td>
            <td>{{data.attr2}}</td>
            <td>
              <label>
                <input type='checkbox' [(ngModel)]='localData.isSet' [ngModelOptions]="{standalone: true}">
              </label>
            </td>
          </tr>
          </tbody>
        </table>
        <div>
          <button type="submit">OK</button>
          <a [routerLink]="['']" >Cancel</a>
        </div>
      </fieldset>
    </form>
  </div>
</div>

единственное, что работает во всплывающем файле, это onSubmit(), и он даже маршрутизирует, но остальные привязки не работают, и когда я нажимаю на cancel, поэтому [routerLink]="['']" должен быть выполнен, я получить эту ошибку VM55939:84 ORIGINAL EXCEPTION: TypeError: Cannot read property 'startsWith' of undefined

любые идеи, что делать?

Ответ 1