toasty.service.ts:13 Uncaught TypeError: Cannot read property 'Injectable' of undefined

[JoaoSaleiro]

• I'm submitting a ... [x ] bug report [ ] feature request [ ] question about the decisions made in the repository

• What is the current behavior?

When application starts, a javascript error appears in the console, thrown by toasty.service.ts :

Uncaught TypeError: Cannot read property 'Injectable' of undefined
    at eval (eval at webpackJsonp.98.module.exports (addScript.js:9), <anonymous>:113:74)
    at Object.module.exports (eval at webpackJsonp.98.module.exports (addScript.js:9), <anonymous>:117:2)
    at __webpack_require__ (eval at webpackJsonp.98.module.exports (addScript.js:9), <anonymous>:30:30)
    at Object.eval (eval at webpackJsonp.98.module.exports (addScript.js:9), <anonymous>:582:78)
    at __webpack_require__ (eval at webpackJsonp.98.module.exports (addScript.js:9), <anonymous>:30:30)

• Please tell us about your environment:

My app.module.ts:

import {ToastyModule} from "ng2-toasty";

...
 imports: [
    ToastyModule.forRoot(),
    ...

My package.json:

{
  "name": "clinica",
  "version": "10.0.0",
  "license": "MIT",
  "angular-cli": {},
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "test": "ng test",
    "pree2e": "webdriver-manager update --standalone false --gecko false",
    "e2e": "protractor"
  },
  "private": true,
  "dependencies": {
    "@angular/common": "^2.4.6",
    "@angular/compiler": "^2.4.6",
    "@angular/core": "^2.4.6",
    "@angular/forms": "^2.4.6",
    "@angular/http": "^2.4.6",
    "@angular/platform-browser": "^2.4.6",
    "@angular/platform-browser-dynamic": "^2.4.6",
    "@angular/router": "^3.4.4",
    "@swimlane/ngx-datatable": "6.0.2",
    "angular2-jwt": "^0.1.25",
    "animate.css": "^3.5.2",
    "bootstrap-sass": "^3.3.7",
    "core-js": "^2.4.1",
    "font-awesome": "^4.7.0",
    "ng2-bootstrap": "1.3.3",
    "ng2-charts": "^1.4.1",
    "ng2-select": "^1.1.2",
    "ng2-toasty": "^2.3.1",
    "ng2-uploader": "2.0.0",
    "rxjs": "^5.0.3",
    "tinymce": "^4.5.2",
    "ts-helpers": "^1.1.1",
    "zone.js": "0.7.6"
  },
  "devDependencies": {
    "@angular/cli": "1.0.0-beta.30",
    "@angular/compiler-cli": "^2.4.6",
    "@types/jasmine": "2.5.41",
    "@types/node": "^7.0.5",
    "codelyzer": "~2.0.0-beta.2",
    "jasmine-core": "2.5.2",
    "jasmine-spec-reporter": "3.2.0",
    "karma": "1.4.1",
    "karma-chrome-launcher": "^2.0.0",
    "karma-cli": "^1.0.1",
    "karma-jasmine": "^1.0.2",
    "karma-remap-istanbul": "^0.6.0",
    "protractor": "~5.1.1",
    "ts-node": "1.2.1",
    "tslint": "^4.3.1",
    "typescript": "2.0.3"
  }
}

Toasty seems to be working, but I can't figure out why this error is being thrown in the console when the application loads (but just before starting). There's nothing special on the way toasty is being loaded, as it's being loaded like any other dependency, but I can't figure out why I have this error with Toasty but not with another dependency...

[akserg]

Hi @JoaoSaleiro

I have updated the ng2-toasty to version 2.4.0 (migration to Angular 2.4.7). Can you please use the latest version and check is that issue still exists?

[JoaoSaleiro]

Hello @akserg . I've updated today ng2-toasty to 2.4.0, among other libraries, and unfortunately the error persists:

Uncaught TypeError: Cannot read property 'Injectable' of undefined at eval (eval at webpackJsonp.100.module.exports (addScript.js:9), <anonymous>:118:74) at Object.module.exports (eval at webpackJsonp.100.module.exports (addScript.js:9), <anonymous>:122:2) at __webpack_require__ (eval at webpackJsonp.100.module.exports (addScript.js:9), <anonymous>:30:30) at Object.eval (eval at webpackJsonp.100.module.exports (addScript.js:9), <anonymous>:624:78) at __webpack_require__ (eval at webpackJsonp.100.module.exports (addScript.js:9), <anonymous>:30:30) at eval (eval at webpackJsonp.100.module.exports (addScript.js:9), <anonymous>:76:18) at eval (eval at webpackJsonp.100.module.exports (addScript.js:9), <anonymous>:79:10) at webpackUniversalModuleDefinition (eval at webpackJsonp.100.module.exports (addScript.js:9), <anonymous>:9:24) at eval (eval at webpackJsonp.100.module.exports (addScript.js:9), <anonymous>:10:3) at eval (<anonymous>) at webpackJsonp.100.module.exports (addScript.js:9) at Object.906 (index.umd.js?da21:1) at __webpack_require__ (bootstrap 20ca24c…:52) at Object.1480 (scripts.bundle.js:94) at __webpack_require__ (bootstrap 20ca24c…:52)

My package.json, now:

  "name": "clinica-doutorfinancas-pt",
  "version": "10.0.0",
  "license": "MIT",
  "angular-cli": {},
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "test": "ng test",
    "pree2e": "webdriver-manager update --standalone false --gecko false",
    "e2e": "protractor"
  },
  "private": true,
  "dependencies": {
    "@angular/common": "^2.4.7",
    "@angular/compiler": "^2.4.7",
    "@angular/core": "^2.4.7",
    "@angular/forms": "^2.4.7",
    "@angular/http": "^2.4.7",
    "@angular/platform-browser": "^2.4.7",
    "@angular/platform-browser-dynamic": "^2.4.7",
    "@angular/router": "^3.4.7",
    "@swimlane/ngx-datatable": "6.1.2",
    "angular2-jwt": "^0.1.25",
    "animate.css": "^3.5.2",
    "bootstrap-sass": "^3.3.7",
    "core-js": "^2.4.1",
    "font-awesome": "^4.7.0",
    "ng2-bootstrap": "1.3.3",
    "ng2-charts": "^1.4.1",
    "ng2-select": "^1.1.2",
    "ng2-toasty": "^2.4.0",
    "ngx-uploader": "2.1.6",
    "rxjs": "^5.1.1",
    "tinymce": "^4.5.2",
    "ts-helpers": "^1.1.1",
    "zone.js": "0.7.7",
    "ng-click-outside": "^2.0.2"
  },
  "devDependencies": {
    "@angular/cli": "^1.0.0-beta.31",
    "@angular/compiler-cli": "^2.4.7",
    "@types/jasmine": "2.5.43",
    "@types/node": "^7.0.5",
    "codelyzer": "~2.0.0-beta.2",
    "jasmine-core": "2.5.2",
    "jasmine-spec-reporter": "3.2.0",
    "karma": "1.4.1",
    "karma-chrome-launcher": "^2.0.0",
    "karma-cli": "^1.0.1",
    "karma-jasmine": "^1.0.2",
    "karma-remap-istanbul": "^0.6.0",
    "protractor": "~5.1.1",
    "ts-node": "2.1.0",
    "tslint": "^4.3.1",
    "typescript": "2.1.6"
  }
}

Do you want me to do any test to identify the problem?

[akserg]

Let me check on my side first.

[YuriFontella]

@JoaoSaleiro não sei se já resolveu o problema?! Mas por acaso estava tentando importar o 'node_modules/ng2-toasty/bundles/index.umd.js' em angular-cli.json? Eu estava fazendo isso e estava com o mesmo problema, não é necessário importar esse arquivo em lugar nenhum e tudo vai funcionar normalmente.

[donothingloop]

Thanks @YuriFontella. This was the solution for me, I was also accidentally importing the umd bundle in .angular-cli.json

[gro22]

I was also accidentally importing the umd bundle in .angular-cli.json

what You mean? I still have the same error :/