angularangular5ng2-bootstrapngx-bootstrap

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


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?


Solution

  • 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';`