"let-" is only supported on ng-template elements

Question

I am trying to get my frontend-application(Angular5.1.x) to run but it stops due to template parse error:

"let-" is only supported on ng-template elements. ("
</thead>
<tbody>
<template ngFor [ngForOf]="rows" [ERROR ->]let-rowz="$implicit" let-    index="index">
<tr *ngIf="!(datePicker.onlyCurrentMonth && rowz[0].sec"):     
ng:///DatepickerModule/DayPickerComponent.html@52:58
    at syntaxError (compiler.js:485)
    at TemplateParser.parse (compiler.js:24633)
    at JitCompiler._parseTemplate (compiler.js:34442)
    at JitCompiler._compileTemplate (compiler.js:34417)
    at compiler.js:34318
    at Set.forEach (<anonymous>)
    at JitCompiler._compileComponents (compiler.js:34318)
    at compiler.js:34188
    at Object.then (compiler.js:474)
    at JitCompiler._compileModuleAndComponents (compiler.js:34187)

I figured I need to follow this on-topic issue, stating I need to use ngx-bootrap@ngx-bootstrap@2.0.0-beta.8, but it doesnt work with that or v.2.0.0-rc.0

https://github.com/valor-software/ngx-bootstrap/issues/3024

...any help is appreciated

why cant you write ng-template instead of template ? – Subash Dec 18 '17 at 10:24 — Subash, Dec 18 '17 at 10:24
Template is deprecated, you should use ng-template. – Bunyamin Coskuner Dec 18 '17 at 10:25 — Bunyamin Coskuner, Dec 18 '17 at 10:25

score 11 · Answer 1 · answered Apr 13 '18 at 11:18

11

I have encountered this error when upgraded from Angular 4.x.x to 5.x.x. Original code was:

<template let-item>

</template>

This worked fine in Angular 4, but failed in 5. Simply using ng-template worked correctly (no packages installation was required, no cache clean required):

<ng-template let-item>

</ng-template>

answered Apr 13 '18 at 11:18

Alexei - check Codidact

22,016
16
145
164

you may need to make it #let-item – Nolan Walker Apr 14 '18 at 03:31

score 7 · Answer 2 · answered Dec 19 '17 at 08:49

7

ngx-bootstrap 1.x.x using <template> which has been deprecated in angular 5.x.x. so you have to upgrade to ngx-bootstrap 2.X.X

Do following to upgrade

npm uninstall --save ngx-bootstrap
npm cache clean -f
npm install --save ngx-bootstrap

answered Dec 19 '17 at 08:49

Kalim ul Haq

196
1
10

score 4 · Accepted Answer · answered Dec 18 '17 at 10:33

4

there are no <template> tags in v2+, please do clean install, and check that you have ngx-bootstrap v2+ check package lock if present

answered Dec 18 '17 at 10:33

valorkin

1,329
9
20

Thank you for the feedback valorkin, in the end I had to do an 'npm cache clear --force' as well for it to work. – Leif Walder Dec 22 '17 at 12:21
I removed my node modules, did `npm cache clear --force`, and I still have this issue. Using `"ngx-bootstrap": "^2.0.2"`, and `"ngx-date-picker": "0.0.24"`. – BBaysinger Jan 26 '18 at 22:07
Remove package lock json file and do it again – valorkin Jan 26 '18 at 22:09
Thanks. I tried that, but I'm still getting this error. – BBaysinger Jan 26 '18 at 22:18
I created a new node project, and imported ngx-date-picker. Version number is 0.0.24. There are several `template` tags in there. – BBaysinger Jan 26 '18 at 22:29
Unfortunately it's not my module so I can't help, but you can use datepicker from ngx-bootstrap – valorkin Jan 26 '18 at 22:30
Thanks. I just updated my ngx-bootstrap and 'npm cache clear --force', Its worked for me. – Pullat Junaid Jun 23 '19 at 17:08
I have updated bootstrap, cleared cache, and there was no – Basil Feb 24 '20 at 06:58

score 2 · Answer 4 · edited Aug 15 '18 at 08:11

2

Just search all

<template and replace with <ng-template
</template> and replace with </ng-template>

edited Aug 15 '18 at 08:11

Mark Rotteveel

100,966
191
140
197

answered Aug 14 '18 at 23:22

Ahmed Adewale

2,943
23
19

score 0 · Answer 5 · answered Jul 07 '18 at 09:21

It was also facing the same issue. by the issue found that the array which i created was

<ng-template  ngFor [ngForOf]="names" let-name="$implicit" let-i="index">
  <div><span>{{i+1}}</span> <span> {{name.name}}</span></div>
</ng-template>

like :-

names= [{id:1,name:'shashikant'},{id:2,name:'Rakesh'},{id:3,name:'Umesh'}];

then i replace by :-

names:Array<any>= [{id:1,name:'shashikant'},{id:2,name:'Rakesh'},{id:3,name:'Umesh'}];

specified the type to Array

score 0 · Answer 6 · answered Aug 23 '19 at 05:23

0

You do not use ng-template tags in html file but you have import ngx module to you app.model.ts then this will come. remove your app.model import statement and build and check.

thank you.

answered Aug 23 '19 at 05:23

Viranja kaushalya

775
6
5

score -3 · Answer 7 · answered Jun 13 '18 at 21:47

-3

I face the same problem and replacing <template> tag by <ng-template> in my html files I solved the issue.

answered Jun 13 '18 at 21:47

M. Gleria

468
5
14

"let-" is only supported on ng-template elements

7 Answers7