Team,
I am getting below exception while accessing template URL from AEM. Please let me know if someone faced similar issue & resolved this.
Please see details below.
Details: I have created a page with blank template & trying to access HTML for the same.
- d([f.ViewChild("lgModal"), e("design:type", k.ModalDirective)], a.prototype, "lgModal", void 0), d([f.ViewChild(l.ModalAnchorDirective), e("design:type", l.ModalAnchorDirective)], a.prototype, "dialogAnchor", void 0), a = d([f.Component({
selector: "dl-flightsearch",
templateUrl: "flightstatus.content.html",
providers: [j.FlightSerachService, i.DatePipe],
Content inside flightstatus.content.html:
<div class="sectionBreak section">
<!--booknow callout component "sectionbreak-inverse for inversed bg" -->
<div class="container-fluid sectionbreak-repeat">
<div class="container">
<div class="row">
<div class="col-md-12 searchform">
<div class="col-md-12 formsearchbox">
<form [formGroup]="flightInfoForm" novalidate (ngSubmit)="getFlightResult(flightInfoForm, flightInfoForm.value, flightInfoForm.valid)" class="flightsearch">
<div [class.adjustWidth]="Searchby == 'FlightNumber'" class="searchby cell inmobile">
<label for="">Search by</label>
<select formControlName="Searchby" (change)="toggle($event.target.value == 'Route')" [(ngModel)]="Searchby" name="Searchby" id="">
<option value="Route">Route</option>
<option value="FlightNumber">Flight Number</option>
</select>
</div>
<div *ngIf="Searchby == 'Route'" class="fromAirport cell inmobilefrom">
<label for="fromAirport">From</label>
<input formControlName="fromAirport" autocomplete="off" dlValidateOnblur name="fromAirport" type="text" id="fromAirport" />
<dl-control-messages submitted="{{submitted}}" controlname="fromAirport" [control]="flightInfoForm.controls.fromAirport"></dl-control-messages>
<a href="javascript:void(0)" (click)="swapField()" class="swapfield"></a>
</div>
<div *ngIf="Searchby == 'Route'" class="toAirport cell inmobileto">
<label for="toAirport">To</label>
<input formControlName="toAirport" autocomplete="off" dlValidateOnblur name="toAirport" type="text" id="toAirport" />
<dl-control-messages submitted="{{submitted}}" controlname="toAirport" [control]="flightInfoForm.controls.toAirport"></dl-control-messages>
</div>
<div [class.adjustWidth]="Searchby == 'FlightNumber'" *ngIf="Searchby == 'FlightNumber'" class="flightNumber cell inmobile">
<label for="flightNumber">Flight Number</label>
<input formControlName="flightNumber" autocomplete="off" dlValidateOnblur name="flightNumber" type="text" id="flightNumber" />
<dl-control-messages submitted="{{submitted}}" controlname="flightNumber" [control]="flightInfoForm.controls.flightNumber"></dl-control-messages>
</div>
<div [class.adjustWidth]="Searchby == 'FlightNumber'" class="departureDate cell inmobile">
<label for="departureDate">Departure Date</label>
<input dlUiDatePicker autocomplete="off" formControlName="Departuredate" name="Departuredate" type="text" id="departureDate" />
<a role="button" data-name="Departuredate" aria-describedby="departureDate" href="#" class="calenderIcon accCalendar" title="Calender" id="departureDateIcon" data-name="Departuredate"></a>
</div>
<div class="flightstatuscall no-padding cell inmobilebutton">
<button type="submit" class="btn btn-large btn-block btn-primary btn-height">View Flight Status
</button>
</div>
<input type="hidden" id="hiddendate" formControlName="hiddendate" />
<!-- <pre>myForm value: <br>{{flightInfoForm | json}}</pre> -->
<!--<pre>Is myForm valid?: <br>{{flightInfoForm.valid | json}}</pre>-->
<!--<div class="margin-20">
<div>myForm details:-</div>
<pre>Is myForm valid?: <br>{{flightInfoForm.valid | json}}</pre>
<pre>Is myForm submitted?: <br>{{submitted | json}}</pre>
<pre>myForm value: <br>{{flightInfoForm.value | json}}</pre>
</div>
<div class="margin-20">
Form changes:
</div>
<div *ngFor="let event of events" class="margin-20">
<pre> {{ event | json }} </pre>
</div>-->
</form>
</div>
<!--booknow component end-->
</div>
Error: Unhandled Promise rejection: Template parse errors:
Can't bind to 'formgroup' since it isn't a known property of 'form'. ("rchform">
<div class="col-md-12 formsearchbox">
<form [ERROR ->][formgroup]="flightInfoForm" novalidate (ngsubmit)="getFlightResult(flightInfoForm, flightInfoForm.va"): a@7:30
Can't bind to 'routerlink' since it isn't a known property of 'a'. ("l-md-6 padding-5">
<a class="legs-content" [ERROR ->]routerlink="/searchresult/{{sr.id}}/{{ flightInfoForm.value.flightNumber}}/{{ flightInfoForm.value.hi"): a@75:80 ; Zone: <root> ; Task: Promise.then ; Value: Error: Template parse errors:
Can't bind to 'formgroup' since it isn't a known property of 'form'. ("rchform">
<div class="col-md-12 formsearchbox">
<form [ERROR ->][formgroup]="flightInfoForm" novalidate (ngsubmit)="getFlightResult(flightInfoForm, flightInfoForm.va"): a@7:30
Can't bind to 'routerlink' since it isn't a known property of 'a'. ("l-md-6 padding-5">
<a class="legs-content" [ERROR ->]routerlink="/searchresult/{{sr.id}}/{{ flightInfoForm.value.flightNumber}}/{{ flightInfoForm.value.hi"): a@75:80
at e.parse (http://localhost:4502/etc/designs/delta-web/clientlibs-app.js:6844:35)
at a._compileTemplate (http://localhost:4502/etc/designs/delta-web/clientlibs-app.js:11166:58)
at http://localhost:4502/etc/designs/delta-web/clientlibs-app.js:11114:35
at Set.forEach (native)
at h (http://localhost:4502/etc/designs/delta-web/clientlibs-app.js:11113:31)
at t.invoke (http://localhost:4502/etc/designs/delta-web/clientlibs-lib.js:3:26797)
at r.run (http://localhost:4502/etc/designs/delta-web/clientlibs-lib.js:3:24184)
at http://localhost:4502/etc/designs/delta-web/clientlibs-lib.js:3:22286
at t.invokeTask (http://localhost:4502/etc/designs/delta-web/clientlibs-lib.js:3:27426)
at r.runTask (http://localhost:4502/etc/designs/delta-web/clientlibs-lib.js:3:24786) Error: Template parse errors:
Can't bind to 'formgroup' since it isn't a known property of 'form'. ("rchform">
<div class="col-md-12 formsearchbox">
<form [ERROR ->][formgroup]="flightInfoForm" novalidate (ngsubmit)="getFlightResult(flightInfoForm, flightInfoForm.va"): a@7:30
Can't bind to 'routerlink' since it isn't a known property of 'a'. ("l-md-6 padding-5">
<a class="legs-content" [ERROR ->]routerlink="/searchresult/{{sr.id}}/{{ flightInfoForm.value.flightNumber}}/{{ flightInfoForm.value.hi"): a@75:80
at e.parse (http://localhost:4502/etc/designs/delta-web/clientlibs-app.js:6844:35)
at a._compileTemplate (http://localhost:4502/etc/designs/delta-web/clientlibs-app.js:11166:58)
at http://localhost:4502/etc/designs/delta-web/clientlibs-app.js:11114:35
at Set.forEach (native)
at h (http://localhost:4502/etc/designs/delta-web/clientlibs-app.js:11113:31)
at t.invoke (http://localhost:4502/etc/designs/delta-web/clientlibs-lib.js:3:26797)
at r.run (http://localhost:4502/etc/designs/delta-web/clientlibs-lib.js:3:24184)
at http://localhost:4502/etc/designs/delta-web/clientlibs-lib.js:3:22286
at t.invokeTask (http://localhost:4502/etc/designs/delta-web/clientlibs-lib.js:3:27426)
