当我通过哈希路由器打开页面时，所有 Angular2 的模板语法都被破坏了

Question

我有一个散列路由器，它可以很好地从我的主页路由。当一个新页面打开时，问题就来了，所有的模板语法都被破坏了。这就是所有的数据绑定、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

有什么想法吗？

Answer 1

问题是团队中有人在 polyfill 中添加了这一行： require('zone.js/dist/zone');

我仍然不知道它的作用以及为什么它会破坏应用程序，但是当我删除它时，一切正常

当我通过哈希路由器打开页面时，所有 Angular2 的模板语法都被破坏了

All Angular2's template syntax is broken when I open the page through my hashed router

angular-routing

angular-template

angular