I am facing an issue where, upon running the application, the console displays all the logs from the ngOnInit function, but the actual view only shows a skeleton without the component variables and text from l18n. It seems like the ngOnInit is not working properly and needs to be called in the constructor.
Interestingly, the problem disappears when I click on a link to a component for the second time. Everything loads correctly as expected. This issue is persistent across all components in the application built on the angular2 starter gulp.
I'm curious as to why the variables are only loaded and ngOnInit is called properly on the second click. Any insights into this behavior?
export class SettingsDevicesComponent implements OnInit {
**variables**
@Component({
selector: 'as-settings-devices',
templateUrl: 'app/settings-devices/settings-devices.component.html',
changeDetection: ChangeDetectionStrategy.OnPush,
styleUrls: ['app/settings-devices/settings-devices.component.css'],
providers: [Communication],
pipes: [TranslatePipe],
directives: [REACTIVE_FORM_DIRECTIVES, NgClass, NgStyle, CORE_DIRECTIVES,ROUTER_DIRECTIVES]
})
constructor(private _cm: Communication,
private _cdRef: ChangeDetectorRef,
private _router: Router,
private _sanitizer: DomSanitizationService,
@Inject(ElementRef) elementRef: ElementRef
) {
this.elementRef = elementRef;
this.ngOnInit();
this.fileUpload = new FormGroup({
color: this.color
});
this.fileName = new FormGroup({
fileNameInput: this.fileNameInput
});
this.settingsName = new FormGroup({
settingsNameInput: this.settingsNameInput
});
}
ngOnInit() {
this.getDeviceData();
this.getZoneData();
}
}