moribvndvs / ng2-idle

Responding to idle users in Angular (not AngularJS) applications.
https://moribvndvs.github.io/ng2-idle
Apache License 2.0
315 stars 128 forks source link

NoProviderError after RC6 upgrade #17

Closed patriknil90 closed 7 years ago

patriknil90 commented 7 years ago

Had ng2-idle implemented on a RC5/Webpack installation after following the GETTING STARTED part of the readme. Everything working fine. Upgraded to RC6 yesterday and got an error + app crash.

Image with the chrome console error

NoProviderError {_nativeError: Error: No provider for KeepaliveSvc! at NoProviderError.Error (native) at NoProviderError.Ba…, keys: Array[1], injectors: Array[1]}
_nativeError
:
Error: No provider for KeepaliveSvc! at NoProviderError.Error (native) at NoProviderError.BaseError [as constructor] (http://localhost/struktur/assets/d0a4e284/vendor.bundle.js:1618:39) at NoProviderError.AbstractProviderError [as constructor] (http://localhost/struktur/assets/d0a4e284/vendor.bundle.js:2102:21) at new NoProviderError (http://localhost/struktur/assets/d0a4e284/vendor.bundle.js:2133:21) at ReflectiveInjector_._throwOrNull (http://localhost/struktur/assets/d0a4e284/vendor.bundle.js:3735:24) at ReflectiveInjector_._getByKeyDefault (http://localhost/struktur/assets/d0a4e284/vendor.bundle.js:3763:30) at ReflectiveInjector_._getByKey (http://localhost/struktur/assets/d0a4e284/vendor.bundle.js:3726:30) at ReflectiveInjector_.get (http://localhost/struktur/assets/d0a4e284/vendor.bundle.js:3535:26) at NgModuleInjector.AppModuleInjector.createInternal (AppModule.ngfactory.js:451:67) at NgModuleInjector.create (http://localhost/struktur/assets/d0a4e284/vendor.bundle.js:9911:81)
constructResolvingMessage

I have not tried to install the ng2-keepalive library in my app.

What I did try was to declare the KeepaliveSvc class as a provider in app.module.ts and in the component where the Idle functions run in different ways with no success.

Setup:

"dependencies": {
    "@angular/common": "2.0.0-rc.6",
    "@angular/compiler": "2.0.0-rc.6",
    "@angular/compiler-cli": "0.6.0",
    "@angular/core": "2.0.0-rc.6",
    "@angular/forms": "2.0.0-rc.6",
    "@angular/http": "2.0.0-rc.6",
    "@angular/platform-browser": "2.0.0-rc.6",
    "@angular/platform-browser-dynamic": "2.0.0-rc.6",
    "@angular/router": "3.0.0-rc.2",
    "@angular/upgrade": "2.0.0-rc.6",
    "@ng-bootstrap/ng-bootstrap": "^1.0.0-alpha.3",
    "angular2-apollo": "^0.4.3",
    "angular2-modal": "^2.0.0-beta.12",
    "apollo-client": "^0.4.11",
    "core-js": "^2.2.0",
    "es6-promise": "^3.2.1",
    "ie-shim": "^0.1.0",
    "isomorphic-fetch": "^2.2.1",
    "ng2-bootstrap": "^1.0.24",
    "ng2-idle": "^1.0.0-alpha.15",
    "ng2-redux": "^3.3.5",
    "redux": "^3.5.2",
    "rxjs": "5.0.0-beta.6",
    "typescript": "^1.9.0-dev",
    "zone.js": "~0.6.12"
  }

app.module.ts:

import { IDLE_PROVIDERS } from 'ng2-idle/core';

providers   : [
  ...
  IDLE_PROVIDERS
]

auth-timer.component.ts:

import { Idle, DEFAULT_INTERRUPTSOURCES } from 'ng2-idle/core';
constructor(
  private idle: Idle
)
{
  idle.setIdle(600);
  idle.setTimeout(180);
  idle.setInterrupts(DEFAULT_INTERRUPTSOURCES);
  idle.onIdleStart.subscribe(() => {
      console.log('IdleStart');
    });
  idle.onIdleEnd.subscribe(() => {
      console.log('IdleEnd');
    });
  idle.onTimeoutWarning.subscribe((countdown:number) => {
      console.log('TimeoutWarning: ' + countdown);
    });
  idle.onTimeout.subscribe(() => {
      console.log('Timeout');
    });
  // start watching for idleness right away.
    idle.watch();
}
elvirdolic commented 7 years ago

I have the same issue

elvirdolic commented 7 years ago

Here is a workaround

extend the Idle Class and provide it instead of Idle

eg

import { Optional, Injectable } from '@angular/core';
import { Idle, SimpleExpiry } from 'ng2-idle/core';

@Injectable()
export class PalIdle extends Idle {
    constructor(expiry: SimpleExpiry) {
        super(expiry);
    }
}

then in your component, module whatever: providers: [PalIdle, SimpleExpiry]
patriknil90 commented 7 years ago

Thanks @elvirdolic ,this worked great for me as well!

MarkySparky commented 7 years ago

@patriknil90 I'm using Ionic RC0, i'm trying to use the workaround form @elvirdolic, but I keep getting an error:

node_modules/ng2-idle/core.js does not export SimpleExpiry

It works fine using ionic serve, but when I try and make a prod bundle (ionic build ios) it fails as above - I assume its the AOT compiler that is complaining for some reason.

Can you provide a working repo with the workaround in it?

My code snippet: import { Idle} from 'ng2-idle/core'; import { SimpleExpiry} from 'ng2-idle/core';

@Injectable() export class PalIdle extends Idle { constructor(expiry: SimpleExpiry) { super(expiry); } }

@Component({ templateUrl: 'app.html', providers: [PalIdle, SimpleExpiry], }) export class MyApp { ...