Uncaught Error: Template parse errors: "let-" is only supported on ng-template elements.

Question

I am migrating my angular-cli project from Angular-4 to Angular-5, but faced this error, anybody knows any solution to fix this error?

Uncaught Error: Template parse errors:
"let-" is only supported on ng-template elements. ("
<template #tourStep [ERROR ->]let-step="step">
  <p class="tour-step-content">{{step?.content}}</p>
  <div class="tour-step"): ng:///TourNgBootstrapModule /TourStepTemplateComponent.html@1:24
at syntaxError (compiler.js:466)

I have tried by installing ngx-bootstrap, but no luck. anybody knows, solution to fix this error?

Answer 1

After searching for long time i found the solution, replacing "template" into "ng-template" is one of the solution, but this problem is because of if you are using peer version incompatible to ngx-bootstrap, then it is an error. Previous error prone package.json was like this. This is how i have fixed my problem.

{
   ....
   ....
   "dependencies": {
   "@angular/animations": "5.0.4",
   "@angular/cdk": "5.0.0-rc.2",
   "@angular/common": "5.0.4",
   "@angular/compiler": "5.0.4",
   "@angular/core": "5.0.4",
   "@angular/forms": "5.0.4",
   "@angular/http": "5.0.4",
   "@angular/material": "5.1.0",
   "@angular/platform-browser": "5.0.4",
   "@angular/platform-browser-dynamic": "5.0.4",

    "ng2-bootstrap": "^1.2.5",
    "ng2-tour": "0.1.6",
   ....
   ....
}

and below is fix for versions, so i have used "ngx-bootstrap": "^2.0.2", "ngx-tour": "0.0.1".

{
  ....
  ....
  "dependencies": {
  "@angular/animations": "5.0.4",
  "@angular/cdk": "5.0.0-rc.2",
  "@angular/common": "5.0.4",
  "@angular/compiler": "5.0.4",
  "@angular/core": "5.0.4",
  "@angular/forms": "5.0.4",
  "@angular/http": "5.0.4",
  "@angular/material": "5.1.0",
  "@angular/platform-browser": "5.0.4",
  "@angular/platform-browser-dynamic": "5.0.4",

  "ngx-bootstrap": "^2.0.2",
  "ngx-tour": "0.0.1,
  ....
  ....
}

and also change in app.module.ts to import the TourNgBootstrapModule.

`import {TourNgBootstrapModule} from 'ngx-tour-ng-bootstrap';`

Answer 2

The error says it all. The tag <template> is being abandonned so you need to change it to <ng-template> in your html

Answer 3

Looks like you're using version 1.9.3.

ngx-bootstrap 1.9.3 only supports angular 2 and 4. Please update to the latest version (2.0.2) and it will work fine with angular 5

Answer 4

use <ng-template #tourStep let-step="step"> </ng-template>instead of <template>