Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

I have a hashed router that is routing from my main page just fine. The problem comes when a new page opens, all the template syntax is broken. That is all data bindings, ngFors, and even [routerLink]. So the pages open without the angular logic but if I refresh the browser while on these hashed pages they work just fine.

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>

the only thing that works in the popup file is the onSubmit(), and it even routes but the rest of the bindings do not, and when I click on the cancel so the [routerLink]="['']" should be executed, I get that error VM55939:84 ORIGINAL EXCEPTION: TypeError: Cannot read property 'startsWith' of undefined

any ideas what to do?

like image 613
Mostafa Fateen Avatar asked Aug 05 '16 14:08

Mostafa Fateen


1 Answers

The problem was that somebody in the team added this line in the polyfills: require('zone.js/dist/zone');

I still have no idea what it does and why was it breaking the app but when I removed it, everything worked

like image 169
Mostafa Fateen Avatar answered Sep 19 '22 20:09

Mostafa Fateen