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

Question

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

Answer 1

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

Answer 2

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.

Answer 3

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

For angular 8 permanently fixed my issue.

Answer 4

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