Angular 5 ng-bootstrap 类型“ElementRef”不是通用错误

Posted

技术标签:

【中文标题】Angular 5 ng-bootstrap 类型“ElementRef”不是通用错误【英文标题】:Angular 5 ng-bootstrap Type 'ElementRef' is not generic err 【发布时间】:2018-11-19 16:22:25 【问题描述】:

我在这些版本中使用 angular 5 和 ng-bootstrap:

  "private": true,
  "dependencies": 
    "@angular/animations": "^5.2.0",
    "@angular/common": "^5.2.0",
    "@angular/compiler": "^5.2.0",
    "@angular/core": "^5.2.0",
    "@angular/forms": "^5.2.0",
    "@angular/http": "^5.2.0",
    "@angular/platform-browser": "^5.2.0",
    "@angular/platform-browser-dynamic": "^5.2.0",
    "@angular/router": "^5.2.0",
    "@ng-bootstrap/ng-bootstrap": "^2.1.0",
    "angular-in-memory-web-api": "^0.5.4",
    "angular2-moment": "^1.9.0",
    "bootstrap": "^4.1.1",
    "core-js": "^2.4.1",
    "date-util": "^1.2.1",
    "material-icons": "^0.2.1",
    "ngx-bootstrap": "^3.0.0",
    "normalize.css": "^8.0.0",
    "rxjs": "^5.5.6",
    "zone.js": "^0.8.19"
  ,

当我得到 ng serve 时出现此错误:

**

编译失败。

node_modules/@ng-bootstrap/ng-bootstrap/buttons/radio.d.ts(58,96): 错误 TS2315:类型“ElementRef”不是通用的。 node_modules/@ng-bootstrap/ng-bootstrap/datepicker/datepicker-input.d.ts(121,67): 错误 TS2315:类型“ElementRef”不是通用的。 node_modules/@ng-bootstrap/ng-bootstrap/datepicker/datepicker.d.ts(115,208): 错误 TS2315:类型“ElementRef”不是通用的。 node_modules/@ng-bootstrap/ng-bootstrap/dropdown/dropdown.d.ts(12,45): 错误 TS2315:类型“ElementRef”不是通用的。 node_modules/@ng-bootstrap/ng-bootstrap/dropdown/dropdown.d.ts(29,45): 错误 TS2315:类型“ElementRef”不是通用的。 node_modules/@ng-bootstrap/ng-bootstrap/dropdown/dropdown.d.ts(37,44): 错误 TS2315:类型“ElementRef”不是通用的。 node_modules/@ng-bootstrap/ng-bootstrap/modal/modal-window.d.ts(13,40): 错误 TS2315:类型“ElementRef”不是通用的。

【问题讨论】:

您使用哪个版本的 Typescript?最新的是 2.9.1。 【参考方案1】:

我有同样的问题。所以我卸载了ng-bootstrap

然后我直接用2.0.0版本重新安装。

npm install --save @ng-bootstrap/ng-bootstrap@2.0.0

【讨论】:

只是为了清楚;确切的卸载命令是:npm uninstall @ng-bootstrap/ng-bootstrap。顺便说一句,请注意,安装仍然会警告有关角度版本,但安装后它确实可以工作。【参考方案2】:

您需要使用 Angular 6.0.0 或更高版本和 ng-bootstrap >= 2.0.0。 npm / yarn install 应该在安装过程中给你警告。

恢复到 ng-bootstrap 2.0.0 不是解决方案,因为您只会被这个版本的库卡住,并且不会收到更新/修复。

要正确解决此问题,您需要:

将 Angular 升级到 6.0.0 或更高版本(推荐) 使用最新的 ng-bootstrap 仍然兼容 Angular 5.x (1.1.2)

【讨论】:

对于 Angular 5,不推荐使用命令:npm install --save @ng-bootstrap/ng-bootstrap@2.0.0【参考方案3】:

将您的 ng-bootstrap 版本更改为“2.0.0”

"@ng-bootstrap/ng-bootstrap": "2.0.0"

然后npm install 并尝试为应用程序提供服务。

我遇到了同样的问题,上面的方法对我有用。

【讨论】:

【参考方案4】:

我突然面临同样的问题。

在我的例子中,我使用的是 ng-boostrasp 2.0.0,但我是这样指定依赖关系的:

"@ng-bootstrap/ng-bootstrap": "^2.0.0"

在某个时间点(基于过去成功构建的日志:自 6 月 1 日以来的某个地方)开始获取版本 2.1.0。

所以我更改了我的 package.json 以准确选择 2.0.0:

"@ng-bootstrap/ng-bootstrap": "2.0.0"

这解决了我的问题。

【讨论】:

【参考方案5】:

安装最新的 ng-bootstrap 后,在服务上显示错误。

最后,这样做

npm install --save @ng-bootstrap/ng-bootstrap@2.0.0

帮助。

【讨论】:

【参考方案6】:

安装 ng-bootstrap 检查版本兼容性。

ng-bootstrap    Angular  Bootstrap CSS
1.x.x             5.0.2   4.0.0
2.x.x             6.0.0   4.0.0
3.x.x             6.1.0   4.0.0
4.x.x             7.0.0   4.0.0
5.x.x             8.0.0   4.3.1 

您可以在此处的版本选项卡下找到版本详细信息, https://www.npmjs.com/package/@ng-bootstrap/ng-bootstrap

【讨论】:

以上是关于Angular 5 ng-bootstrap 类型“ElementRef”不是通用错误的主要内容,如果未能解决你的问题,请参考以下文章

Angular之ng-bootstrap使用

Storybook Angular 和 ng-bootstrap

如何使用 angular-cli 和 ng-bootstrap 自定义 Bootstrap 4 SCSS 变量?

使用 npm 让 ng-bootstrap 为 angular cli 项目工作

折叠在导航栏面包屑按钮的 ng-bootstrap 和 Angular 4 应用程序中不起作用

Angular 6 - ng-bootstrap - 样式标签