Upgrading ngx-bootstrap 3.0.1 to 4.0.1

4
votes

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 ImageErrors in the image

4
angular6ngx-bootstrap

4 Answers

3
votes

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 [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

and you want to ignore this warning ([email protected]:) 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

1
votes

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.
1
votes

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";

0
votes

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.