In the process of developing an Angular2 library that needs to work with both SystemJS and Webpack, I encountered a situation where I had to detect the height and width in pixels of the body tag to set dimensions for child tags. However, the behavior of Angular LifeCycle differed between SystemJS and Webpack, leading to different results. To illustrate this issue, I implemented the following code:
foo.component.ts
ngOnChanges() {
console.log("ngOnChanges : " + document.body.clientHeight);
}
ngOnInit(){
this.elHTML.setAttribute("direction", this.direction.toString());
console.log("ngOnInit : " + document.body.clientHeight);
}
ngDoCheck() {
console.log("ngDoCheck : " + document.body.clientHeight);
}
ngAfterContentInit() {
console.log("ngAfterContentInit : " + document.body.clientHeight);
}
ngAfterContentChecked() {
console.log("ngAfterContentChecked : " + document.body.clientHeight);
}
ngAfterViewInit() {
console.log("ngAfterViewInit : " + document.body.clientHeight);
}
ngAfterViewChecked() {
console.log("ngAfterViewChecked : " + document.body.clientHeight);
this.widthHeightApply();
}
widthHeightApply(){
var offsetWidth : number = document.body.clientWidth;
var offsetHeight : number = document.body.clientHeight;
...
}
SystemJS result
ngOnChanges : 767
ngOnInit : 767
ngDoCheck : 767
ngAfterContentInit : 767
ngAfterContentChecked : 767
Webpack result
ngOnChanges : 40
ngOnInit : 40
ngDoCheck : 40
ngAfterContentInit : 206
ngAfterContentChecked : 206
Why do these different results occur? And how can we achieve consistency across SystemJS and Webpack?