Angular 2 ng-bootstrap，NgbTabset 错误：未捕获（承诺中）：TypeError：无法读取未定义的属性“templateRef”答案

【问题标题】：Angular 2 ng-bootstrap,NgbTabset Error:Uncaught (in promise): TypeError: Cannot read property 'templateRef' of undefinedAngular 2 ng-bootstrap，NgbTabset 错误：未捕获（承诺中）：TypeError：无法读取未定义的属性“templateRef”
【发布时间】：2017-10-08 00:49:57
【问题描述】：

我尝试使用 NgTabset 但我收到此错误 TypeError: Cannot read property 'templateRef' of undefined 。当我将 ng-template 替换为模板标签一切正常。我做错了什么？代码如下：

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

【问题讨论】：

听起来像是依赖错误。要么你缺少从模块导入，要么你需要更新你的 Angular 版本。

标签： angular ng-bootstrap angular-ui-bootstrap-tab

【解决方案1】：

David Aguirre 的评论表明这是一个依赖问题，但似乎至少部分归因于 ng-bootstrap 版本。

我遇到了同样的问题，注意到我的 ng-bootstrap 版本是 1.0.0-alpha.24，但在 https://ng-bootstrap.github.io/app/components/tabset/demos/basic/plnkr.html 的示例中，config.js 中的行是 '@ng-bootstrap/ng-bootstrap': 'npm:@ng-bootstrap/ng-bootstrap@1.0.0-alpha.28/bundles/ng-bootstrap.js'

当我将该版本号降低到 1.0.0-alpha.24 时，我收到了下面的一堆错误消息。

在 Web 上的代码版本中将更改为 1.0.0-alpha.28 有效，但在 VCCode 开发环境中的代码中，我发现只需将 <template> 更改为 <ng-template> 和

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

在 package.json 中

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

不足以解决问题，但是创建一个新的 CLI 实例解决了问题，所以肯定有一些我没有找到的其他依赖项。

https://ng-bootstrap.github.io/app/components/tabset/demos/basic/plnkr.html 处带有 1.0.0-alpha.24 的警告是：

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

这是一种误导，因为代码使用了<ng-template>，而不是警告中声称的<template> 元素。

错误消息的第一行是：

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

希望当其他人收到这些消息时，他们会找到这个帖子。

如果警告和错误消息不是那么误导和不清楚，那将会很有帮助。

【讨论】：

【解决方案2】：

没有 Plunkr 有点难知道，但一定要设置 templateRef 和 #

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

这是一个例子：https://embed.plnkr.co/zsG5ROJD1jYVIoXaR9Ga/

【讨论】：