I recently updated from angular 2.3.1 to 2.4.7, and I've found a very strange behavior, That's the code:
UpcomingGames.html
<div class="row nomargin upcomingGames">
<tl-responsive-height [margin]="15">
<tl-upcoming-game *ngFor="let game of gamesSubscription |async"
[game]="game"
color="#8777b4"></tl-upcoming-game>
</tl-responsive-height>
</div>
ResponsiveHeight.html template:
<div class="scrollable"
#scrollable
(scroll)="moveScrollbar()">
<ng-content></ng-content>
</div>
<div class="scroll-rail" #scrollbar
(mousedown)="drag($event)"
></div>
If I run ng server
in angular 2.3.1 and ng server --aot
in 2.4.7 everything works properly, but in 2.4.7 with JIT compiler, the div with class scrollable is propagated inside every upcoming-game in the ngFor.
I think this can be understood with a couple of images.
And this is the weird behavior:
As you can see, responsive height template is duplicated inside upcoming-game template.
Like I said, this doesn't happen with AOT in 2.4.7 or JIT in 2.3.1.
I have another pages in the app and all work properly except this one. I use responsiveHeight component in another components that the router is not involved in and works everything.
I would say it's related with Router + component transclusion + ngFor.
Versions:
@angular/cli: 1.0.0-beta.31
node: 6.9.1
os: darwin x64
@angular/common: 2.4.7
@angular/compiler: 2.4.7
@angular/core: 2.4.7
@angular/forms: 2.4.7
@angular/http: 2.4.7
@angular/platform-browser: 2.4.7
@angular/platform-browser-dynamic: 2.4.7
@angular/router: 3.4.7
@angular/cli: 1.0.0-beta.31
@angular/compiler-cli: 2.4.7
UPDATE:
If I remove ngFor works properly. If I remove async pipe and fill ngFor with sync data, doesn't work.
UPDATE2:
If I create a noop component that transcludes the content, everything works:
<div class="row nomargin upcomingGames">
<noop-transclusion>
<tl-responsive-height [margin]="15">
<tl-upcoming-game *ngFor="let game of gamesSubscription |async"
[game]="game"
color="#8777b4"></tl-upcoming-game>
</tl-responsive-height>
</noop-transclusion>
</div>
It seems ngFor is related to this.