Angular 2 ng-bootstrap,NgbTabset Error:Uncaught (in promise): TypeError: Cannot read property 'templateRef' of undefined

Question

I try to use NgTabset but i get this error TypeError: Cannot read property 'templateRef' of undefined .When i replace the ng-template with the template tag everything works fine .What am i doing wrong? Here is the code:

<ngb-tabset>
  <ngb-tab>
    <ng-template ngbTabTitle>
      Tab1
    </ng-template>
    <ng-template ngbTabContent>
      Here is tab 1
    </ng-template>
  </ngb-tab>
</ngb-tabset>

Answer 1

The comment by David Aguirre suggested this is a dependency issue, but it seems to due at least in part to the ng-bootstrap version.

I had this same problem and noticed that my version of ng-bootstrap was 1.0.0-alpha.24, but in the example at https://ng-bootstrap.github.io/app/components/tabset/demos/basic/plnkr.html the line in config.js was '@ng-bootstrap/ng-bootstrap': 'npm:@ng-bootstrap/[email protected]/bundles/ng-bootstrap.js'

When I lowered that version number to 1.0.0-alpha.24 I got the bunch of error messages below.

Making the change up to 1.0.0-alpha.28 worked in the version of our code on the Web, but in the code in the VCCode development environment I found that just changing <template> to <ng-template> and

"@ng-bootstrap/ng-bootstrap": "^1.0.0-alpha.24",

in package.json to

"@ng-bootstrap/ng-bootstrap": "^1.0.0-alpha.28",

was not enough to fix the problem, but creating a new CLI instance fixed the problem, so there must be some other dependency that I didn't find.

The warning at https://ng-bootstrap.github.io/app/components/tabset/demos/basic/plnkr.html with 1.0.0-alpha.24 was:

Template parse warnings:
The <template> element is deprecated. Use <ng-template> instead ("[WARNING ->]<template ngFor [ngForOf]="parts" let-part let-isOdd="odd"><span *ngIf="isOdd" class="{{highlightClas"): ng:///NgbTypeaheadModule/NgbHighlight.html@0:0

This was misleading since the code uses the <ng-template>, not the <template> element as claimed in the warnings.

The first lines of the error messages were:

ERROR TypeError: Cannot read property 'templateRef' of undefined

ERROR CONTEXT DebugContext_ {view: Object, nodeIndex: 3, nodeDef: Object, elDef: Object, elView: Object}

Unhandled Promise rejection: Cannot read property 'templateRef' of undefined ; Zone: <root> ; Task: Promise.then ; Value: TypeError: Cannot read property 'templateRef' of undefined

Error: Uncaught (in promise): TypeError: Cannot read property 'templateRef' of undefined

Hopefully when other people get these messages they will find this thread.

It would be helpful if the warning and error message were not so misleading and unclear.

Answer 2

It's a little hard to know without a Plunkr, but be sure to set templateRef and the #

<app-content [templateRef]="nestedComponentRef"></app-content>
<template #nestedComponentRef>
    <component>
    </component>
</template>

Here's an example: https://embed.plnkr.co/zsG5ROJD1jYVIoXaR9Ga/