ng-template not working in angular 9 with IVY

🐞 bug report

ng-template is not working properly in angular 9 but working fine in angular 8

Is this a regression?

yes, working fine in angular 8

Description

I have created same application in both angular 8 and angular 9, my application working fine in angular 8.

🔬 Minimal Reproduction

Working sample

1. download below angular 8 sample angular8.zip

2. Give “npm i” and “ng serve”

3.then chose any one row from grid and click “edit” button, you wiill see below

my template working fine.

issue sample

1. download below angular 9 sample

angular 9.zip

1. Give “npm i” and “ng serve”

3.then below screen occurs , then chose any one row from grid and click “edit” button, you wiill see below

Code snippet

<ejs-grid [dataSource]='data' allowPaging='true' [pageSettings]='pageSettings' [editSettings]='editSettings' [toolbar]='toolbar' (actionBegin)='actionBegin($event)' (actionComplete)='actionComplete($event)'>
      <e-columns>
          <e-column field='OrderID' headerText='Order ID' width='120' textAlign='Right' [isPrimaryKey]='true'></e-column>
          <e-column field='CustomerName' headerText='Customer Name' width='120'></e-column>
          <e-column field='Freight' headerText='Freight' width='120' format='C2' textAlign='Right'></e-column>
          <e-column field='OrderDate' headerText='Order Date' width='130' format='yMd' textAlign='Right'></e-column>
          <e-column field='ShipCountry' headerText='Ship Country' width='150'></e-column>
      </e-columns>
      <ng-template #editSettingsTemplate let-data>
          <div ngForm #orderForm="ngForm">
              <table class="e-table e-inline-edit" cellspacing="0.25">
                  <colgroup>`
                          <col style="width: 120px;">
                          <col style="width: 120px;">
                          <col style="width: 120px;">
                          <col style="width: 130px;">
                          <col style="width: 150px;">
                  </colgroup>
                  <tbody>
                      <tr>
                          <td style="text-align: right" class='e-rowcell'>
                              <div class="e-input-group" [ngClass]= "{'e-disabled': !data.isAdd}">
                                  <input class="e-input e-field" [(ngModel)]="orderData.OrderID" required [attr.disabled]="!data.isAdd ? '' : null" name='OrderID' type="text" (focus)="focusIn($event.target)"
                                      (blur)="focusOut($event.target)" #OrderID style="text-align: right"  />
                              </div>
                          </td>
                          <td class='e-rowcell'>
                              <div class="e-input-group">
                                  <input class="e-input e-field" name='CustomerName' [(ngModel)]="orderData.CustomerName" required type="text" (focus)="focusIn($event.target)"
                                      (blur)="focusOut($event.target)" #CustomerName />
                              </div>
                          </td>
                          <td style="text-align: right" class='e-rowcell'>
                              <ejs-numerictextbox name="Freight" id="Freight" [(ngModel)]="orderData.Freight" floatLabelType='Never'></ejs-numerictextbox>
                          </td>
                          <td style="text-align: right" class='e-rowcell'>
                              <ejs-datepicker id="OrderDate" name="OrderDate" required [(ngModel)]="orderData.OrderDate" floatLabelType='Never'></ejs-datepicker>                            
                          </td>
                          <td class='e-rowcell'>
                              <ejs-dropdownlist id="ShipCountry" name="ShipCountry" [(ngModel)]="orderData.ShipCountry" [dataSource]='shipCountryDistinctData' [fields]="{text: 'ShipCountry', value: 'ShipCountry' }" popupHeight='300px' floatLabelType='Never'></ejs-dropdownlist>
                          </td>
                      </tr>
                  </tbody>
              </table>
          </div>
      </ng-template>
  </ejs-grid>

🌍 Your Environment

Angular Version:

"@angular/animations": "~9.0.2",
    "@angular/common": "~9.0.2",
    "@angular/compiler": "~9.0.2",
    "@angular/core": "~9.0.2",
    "@angular/forms": "~9.0.2",
    "@angular/platform-browser": "~9.0.2",
    "@angular/platform-browser-dynamic": "~9.0.2",
    "@angular/router": "~9.0.2",
"@angular-devkit/build-angular": "~0.900.3",
    "@angular/cli": "~9.0.3",
    "@angular/compiler-cli": "~9.0.2",
    "@angular/language-service": "~9.0.2",

Anything else relevant? Both angular 8 and angular 9, my template reference are same in my soure level"ngAfterContnctChecked" hook.

angular 8 reference:

angular 9 reference:

[bryanrideshark]

@alxhub , we’re going to be merging #35464 and making it possible to override the prototype before startup right? It’ll still be pretty efficient AFAIK, because the read will be cached once the first component of that type has been instantiated.

I think a lot of more advanced users of Angular are waiting with eager expectation for #35464 to be merged.

[Achilles1515]

It’s no longer possible to overwrite lifecycle hooks with mocks on directive instances for testing (instead, modify the lifecycle hook on the directive type itself).

@alxhub But this will be changing “soon”…right? https://github.com/angular/angular/pull/35464