ハッシュ化されたルータを通してページを開くと、すべてAngular2のテンプレート構文が壊れます

Question

私のメインページからルーティングされているハッシュルータがあります。この問題は、新しいページが開いてテンプレートの構文がすべて破損した場合に発生します。それはすべてのデータバインディング、ngFors、さらには[routerLink]です。したがって、ページは角度のないロジックがなくても開きますが、これらのハッシュページでブラウザを更新するとうまく動作します。

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

何をすべきか？

Answer 1

問題は、チーム内の誰かがpolyfillsにこの行を追加したことだった。 require('zone.js/dist/zone');

、私はまだそれが何をするか見当がつかないと、なぜそれがアプリを破るが、私はそれを削除したときに、すべてが

を加工しました