Upgrading ngx-bootstrap 3.0.1 to 4.0.1 - angular6

Question

While Upgrading from ngx bootstrap 3.0.1 to 4.0.1 am getting the following error.Replaced the node_modules, package.json still getting the same errors.
Angular Version :
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

Answer 1

I have encounter this error when I was using ngx-editor to implement rich text editor in Angular
This error occurs due to older version of Angular and rxjs, In my case I was using Angular 6 and rxjs 6.0.0, then I have updated it to Angular 7 and rxjs 6.2.0 by using below commands (Typescript will also be updated to typescript 2.9.2)
ng update rxjs#~6.2.0
ng update #angular/cli #angular/core
Note: If you are getting below warning
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents#1.2.7: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
and you want to ignore this warning (fsevents#1.2.7:) you can use below command
npm i -f
After this, I have uninstall ngx-bootstrap and ngx-editor, then first install dependency packages and then reinstall ngx-bootstrap and ngx-editor, as mentioned below steps.
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
At last, you need to check if HttpClientModule and other packages are properly imported in app.module.ts
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
],
Now it is resolved, In addition you can able to use rich text editor by using ngx-editor
Thanks

Answer 2

the Solution for this error is the same to the above, change the followings versions in 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",
remove the node_module and package-lock.json and than install npm:
npm install.

Answer 3

Fix it in files
"\node_modules\ngx-bootstrap\datepicker\reducer\bs-datepicker.actions.d.ts"
From
static readonly CALCULATE = "[datepicker] calculate dates matrix";
To
static readonly CALCULATE : "[datepicker] calculate dates matrix";

Answer 4

Solution for this error is change the Bootstrap version (4.0.0 to 3.0.0) and remove the ^ in package.json (i.e "rxjs": "^6.0.0" to "rxjs": "6.0.0", and "rxjs-compat": "^6.2.2" to "rxjs-compat": "6.2.2",).
if you want bootstrap 4 version than try to change the rxjs and rxjs-compat (As i inform in above line).and remove the node_module and package-lock.json and than install npm.