将 ngx-bootstrap 3.0.1 升级到 4.0.1答案

【问题标题】：Upgrading ngx-bootstrap 3.0.1 to 4.0.1将 ngx-bootstrap 3.0.1 升级到 4.0.1
【发布时间】：2019-09-02 11:37:57
【问题描述】：

从 ngx bootstrap 3.0.1 升级到 4.0.1 时出现以下错误。替换了 node_modules，package.json 仍然出现相同的错误。角度版本：

Angular 6,
Typescript: 2.7.2.

Errors:
ERROR in node_modules/ngx-bootstrap/chronos/utils/type-checks.d.ts(8,62): error TS2304: Cannot find name 'Extract'.

node_modules/ngx-bootstrap/datepicker/reducer/bs-datepicker.actions.d.ts(5,33): error TS1039: Initializers are not allowed in ambient contexts.

node_modules/ngx-bootstrap/timepicker/reducer/bs-datepicker.actions.d.ts(4,33): error TS1039: Initializers are not allowed in ambient contexts.

Errors in the image

【问题讨论】：

标签： angular6 ngx-bootstrap

【解决方案1】：

在文件中修复它 "\node_modules\ngx-bootstrap\datepicker\reducer\bs-datepicker.actions.d.ts"

来自

static readonly CALCULATE = "[datepicker] calculate dates matrix";

到

static readonly CALCULATE : "[datepicker] calculate dates matrix";

【讨论】：

【解决方案2】：

这个错误的解决方法同上，在package.json中修改如下版本。

"bootstrap": "4.1.3",
"font-awesome": "4.7.0",
"ngx-bootstrap": "3.1.1",
"ngx-editor": "4.0.0",
"rxjs": "6.3.3",

删除node_module和package-lock.json，然后安装npm：

npm install.

【讨论】：

【解决方案3】：

这个错误的解决方法是更改 Bootstrap 版本（4.0.0 到 3.0.0）并删除 package.json 中的 ^（即 "rxjs": "^6.0.0" 到 "rxjs": "6.0.0 ", 和 "rxjs-compat": "^6.2.2" 到 "rxjs-compat": "6.2.2",)。如果您想要 bootstrap 4 版本而不是尝试更改 rxjs 和 rxjs-compat（正如我在上面的行中告知的那样）。并删除 node_module 和 package-lock.json 并安装 npm。

【讨论】：

【解决方案4】：

我在Angular中使用ngx-editor实现富文本编辑器时遇到了这个错误

此错误是由于 Angular 和 rxjs 的旧版本而发生的，在我的情况下，我使用的是 Angular 6 和 rxjs 6.0.0，然后我使用以下命令将其更新为 Angular 7 和 rxjs 6.2.0（Typescript 也会更新到 typescript 2.9.2)

ng update rxjs@~6.2.0
ng update @angular/cli @angular/core

注意：如果您收到以下警告

npm WARN notsup 跳过可选依赖：fsevents@1.2.7 不支持的平台：想要 {"os":"darwin","arch":"any"}（当前：{"os":"win32 ","arch":"x64"})

如果你想忽略这个警告 (fsevents@1.2.7:) 你可以使用下面的命令

   npm i -f

在此之后，我已经卸载了ngx-bootstrap和ngx-editor，然后首先安装依赖包，然后重新安装ngx-bootstrap和ngx-editor，如下所述。

npm i ajv@^6.9.1 --save

npm i font-awesome@^4.7.0 --save

npm i angular-font-awesome

npm install ngx-bootstrap --save

npm install ngx-editor --save

最后需要检查app.module.ts中是否正确导入了HttpClientModule等包

import { NgxEditorModule } from 'ngx-editor';
import { AngularFontAwesomeModule } from 'angular-font-awesome';
import { TooltipModule } from 'ngx-bootstrap/tooltip';
import { HttpClientModule } from '@angular/common/http'; 

imports: [
    BrowserModule,
    AppRoutingModule,
    NgxEditorModule,
    AngularFontAwesomeModule,
    TooltipModule.forRoot(),
    HttpClientModule
  ],

现在已经解决了，另外你可以通过ngx-editor来使用富文本编辑器

谢谢

【讨论】：