Angular 2 JIT Compiler very strange behavior

315 Views Asked by At

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 --aotin 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.

This is the correct behavior: enter image description here

And this is the weird behavior: enter image description here

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.

0

There are 0 best solutions below