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?
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With