CODEWITHSUNDEEP
angulartypescriptangular8
Harshal Surve
Harshal Surve

Reputation: 173

node_modules/ngx-toastr/toastr/toast-noanimation.component.d.ts(19,9)

shared.module.ts

import { animate, state, style, transition, trigger } from '@angular/animations';
import { ToastrModule } from 'ngx-toastr';
import { BrowserModule } from '@angular/platform-browser';

@NgModule({
    declarations: [HeaderComponent, SidebarComponent],
    imports: [
        CommonModule,
        RouterModule,
        FormsModule,
        NgxDatatableModule,
        ToastrModule.forRoot() // ToastrModule added
    ],
    exports: [
        HeaderComponent,
        SidebarComponent,
        FormsModule,
        NgxDatatableModule,
        ToastrModule,
    ],
    providers: []
})

this is my shared module i have installed npm install ngx-toastr --save
npm install @angular/animations --save

But it gives me an error

ERROR in node_modules/@angular/animations/browser/browser.d.ts(135,9): error TS1086: An accessor cannot be declared in an ambient context. node_modules/@angular/animations/browser/browser.d.ts(301,9): error TS1086: An accessor cannot be declared in an ambient context.
node_modules/ngx-toastr/portal/portal.d.ts(26,9): error TS1086: An accessor cannot be declared in an ambient context. node_modules/ngx-toastr/toastr/toast-noanimation.component.d.ts(19,9): error TS1086: An accessor cannot be declared in an ambient context. node_modules/ngx-toastr/toastr/toast.component.d.ts(26,9): error TS1086: An accessor cannot be declared in an ambient context.

Please suggest for this

package.json file

{
  "name": "mop",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^9.0.1",
    "@angular/common": "~8.2.14",
    "@angular/compiler": "~8.2.14",
    "@angular/core": "~8.2.14",
    "@angular/forms": "~8.2.14",
    "@angular/material": "^9.0.0",
    "@angular/platform-browser": "~8.2.14",
    "@angular/platform-browser-dynamic": "~8.2.14",
    "@angular/router": "~8.2.14",
    "@fortawesome/fontawesome-free": "^5.12.1",
    "@ng-bootstrap/ng-bootstrap": "^5.2.1",
    "@swimlane/ngx-datatable": "^16.0.3",
    "angular-font-awesome": "^3.1.2",
    "bootstrap": "^4.4.1",
    "font-awesome": "^4.7.0",
    "line-awesome": "^1.3.0",
    "ng2-bootstrap": "^1.6.3",
    "ngx-cookie-service": "^2.3.0",
    "ngx-toastr": "^12.0.0",
    "rxjs": "~6.4.0",
    "save": "^2.4.0",
    "tslib": "^1.10.0",
    "zone.js": "~0.9.1"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.803.23",
    "@angular/cli": "~8.3.23",
    "@angular/compiler-cli": "~8.2.14",
    "@angular/language-service": "~8.2.14",
    "@types/jasmine": "~3.3.8",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~8.9.4",
    "codelyzer": "^5.0.0",
    "jasmine-core": "~3.4.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.1.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~2.0.1",
    "karma-jasmine-html-reporter": "^1.4.0",
    "protractor": "~5.4.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.15.0",
    "typescript": "~3.5.3"
  }
}

Upvotes: 14

Views: 26359

Answers (5)

Sumedh Deshpande
Sumedh Deshpande

Reputation: 546

This issue may arise if your angular version and toastr version you installed do not match

Dependencies

ngx-toastr  |   Angular version
-------------------------------------
6.5.0       |   4.x

8.10.2      |   5.x

10.1.0      |   8.x 7.x 6.x

11.3.3      |   8.x

12.1.0      |   9.x

current     |   >= 10.x

so for example, if you are using angular 4 x then you should install toastr version 6.5.0 anything more than 6.5.0 might give you an error

How to install toastr particular version? if you have any toastr version already installed then uninstall it by

npm uninstall ngx-toastr

then install a particular version of toaster according to your angular version

npm install ngx-toastr@Your_version_number

note: Also check Your @angular/animations version compatibility if issue still persists
visit: https://www.npmjs.com/package/ngx-toastr#dependencies for more information

Upvotes: 5

MadMac
MadMac

Reputation: 4993

You just need to check that you are using the correct version of ngx-toastr for the version of Angular you are using.

ngx-toastr  Angular
6.5.0       4.x
8.10.2      5.x
10.1.0      8.x 7.x 6.x
11.3.3      8.x current >= 9.x

See the dependencies here: https://www.npmjs.com/package/ngx-toastr#dependencies

Upvotes: 16

Moses
Moses

Reputation: 710

Installed "ngx-toastr": "^10.0.4" and "@angular/animations": "^8.2.14",

For angular 8 permanently fixed my issue.

Upvotes: 6

Chris Teddy Mierassa
Chris Teddy Mierassa

Reputation: 476

I had the same issue. I've solve it by changing the toastr version in the package.json. I've used this "ngx-toastr": "^10.0.4", instead of this "ngx-toastr": "^12.0.0". And then npm i.

Upvotes: 46

Oron Bendavid
Oron Bendavid

Reputation: 1533

Please check your package.json, you may be using wrong version of

@angular... packages, some of them are ~9 and some of them are ~8

upgrade Angular by running:

ng update @angular/core @angular/cli

upgrade material

ng update @angular/material

You can also update manually the version in package.json and run npm install or yarn

Upvotes: 2

Related Questions