Coder Social home page Coder Social logo

moribvndvs / ng2-idle Goto Github PK

View Code? Open in Web Editor NEW
315.0 23.0 129.0 6.62 MB

Responding to idle users in Angular (not AngularJS) applications.

Home Page: https://moribvndvs.github.io/ng2-idle

License: Apache License 2.0

JavaScript 4.40% TypeScript 91.48% CSS 0.65% HTML 3.48%
idle-users expiry keepalive ping angular angular-module maintainer-wanted help-wanted

ng2-idle's People

Contributors

ahelper avatar ap1969 avatar dependabot[bot] avatar dpreindl-nts avatar gabrielrousseaufilion avatar harelm avatar justacodemonkey avatar leifjones avatar markmaynard avatar mmubasher avatar moribvndvs avatar mvarblow avatar mychalhackman avatar nertzy avatar raulcrisan avatar shaizel avatar sliekens avatar superitman avatar un1c0rnr1d3r avatar valkanov avatar wesley-trantham avatar wtrantham avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

ng2-idle's Issues

SystemJS compatibility

In looking at the systemjs.config.js from the Quickstart, we see how to reference packages via map and packages from the SystemJS config API. For all of the scoped @angular packages this works swimmingly. However, I cannot get ng2-idle or ng2-idle-keepalive to properly be referenced. What am I doing wrong?

Here is my wwwroot/js folder hierarchy:

js
|   bootstrap.js
|   bootstrap.min.js
|   jquery.js
|   jquery.min.js
|   jquery.scrollbar.js
|   jquery.scrollbar.min.js
|   Reflect.js
|   Reflect.min.js
|   system.src.js
|   system.src.min.js
|   zone.js
|   zone.min.js
+---@angular
|   +---common
|   |   \---bundles
|   |           common.umd.js
|   |           common.umd.min.js
|   +---compiler
|   |   \---bundles
|   |           compiler.umd.js
|   |           compiler.umd.min.js
|   +---core
|   |   \---bundles
|   |           core.umd.js
|   |           core.umd.min.js
|   +---forms
|   |   \---bundles
|   |           forms.umd.js
|   |           forms.umd.min.js
|   +---http
|   |   \---bundles
|   |           http.umd.js
|   |           http.umd.min.js
|   +---platform-browser
|   |   \---bundles
|   |           platform-browser.umd.js
|   |           platform-browser.umd.min.js
|   +---platform-browser-dynamic
|   |   \---bundles
|   |           platform-browser-dynamic.umd.js
|   |           platform-browser-dynamic.umd.min.js
|   +---router
|   |   \---bundles
|   |           router.umd.js
|   |           router.umd.min.js
|   +---router-deprecated
|   |   \---bundles
|   |           router-deprecated.umd.js
|   |           router-deprecated.umd.min.js
|   \---upgrade
|       \---bundles
|               upgrade.umd.js
|               upgrade.umd.min.js
+---ng2-ext
|       angular2localization.umd.js
|       angular2localization.umd.min.js
|       ng2-bs3-modal.js
|       ng2-bs3-modal.min.js
|       ng2-idle-keepalive.js
|       ng2-idle-keepalive.min.js
|       ng2-idle.js
|       ng2-idle.min.js
\---rxjs
    \---bundles
            Rx.umd.js
            Rx.umd.min.js

Here is my systemjs.config.js:

(function (global) {

    var packages = {
        'ng2-idle/core': { defaultExtension: 'js' },
        'ng2-idle-keepalive/core': { defaultExtension: 'js' },
        'ng2-bs3-modal/ng2-bs3-modal': { defaultExtension: 'js' }
    };

    var ngPackageNames = [
      'common',
      'compiler',
      'core',
      'forms',
      'http',
      'platform-browser',
      'platform-browser-dynamic',
      'router',
      'router-deprecated',
      'upgrade',
    ];

    ngPackageNames.forEach(function (pkgName) {
        packages['@angular/' + pkgName] = { 
            main: '/bundles/' + pkgName + '.umd.js', defaultExtension: 'js'
        };
    });

    System.config({
        defaultJSExtensions: true,
        paths: {
            'rxjs/*': 'js/rxjs/bundles/Rx.umd.min.js',
            'angular2localization/*': 'js/ng2-ext/angular2localization.umd.min.js'
        },
        map: {
            'app': 'app/shell',
            '@angular': 'js/@angular',
            'ng2-idle': 'js/ng2-ext',
            'ng2-idle-keepalive': 'js/ng2-ext',
            'ng2-bs3-modal': 'js/ng2-ext'
        },
        packages: packages
    });

})(this);

When the files are requested by the client module loader, they return happily but then references to any objects of these from import statements are undefined?

Keep in mind that I have tried all sorts of alternative ways of referencing these packages, including but not limited to paths, implicit versus explicit main reference in packages, implicit versus explicit .js file in map, etc...

interrupts should not be paused during the timeout countdown

When the onTimeoutWarning event is firing events, the interrupts are paused. I can't find a way to prevent the timeout. I don't think interrupts should be paused so that the timeout can be prevented.

What I want to do is display the countdown to the user and allow them to cancel the timeout simply by moving the mouse over the page. This is a feature that I had working with ng-idle for Angular 1 which doesn't seem to work in ng2-idle.

Class Subject<T> Incorrectly Extends Subject<T>

I'm submitting a ... (check one with "x")

[x ] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here, instead see https://github.com/HackedByChinese/ng2-idle/blob/master/CONTRIBUTING.md#getting-help

Current behavior
When I try to build my Angular 4 application I get the following error:
E:/Projects/INSTINCT/AnalystDashboard/src/Proxy_Reporting/node_modules/ng2-idle/node_modules/rxjs/Subject.d.ts(16,22): error TS2415: Class 'Subject' incorrectly extends base class 'Observable'.
Types of property 'lift' are incompatible.
Type '<T, R>(operator: Operator<T, R>) => Observable' is not assignable to type '(operator: Operator<T, R>) => Observable'.
Type 'Observable' is not assignable to type 'Observable'.
Type 'T' is not assignable to type 'R'.

Expected behavior
Expect the above issue not to occur

Minimal reproduction of the problem with instructions

What is the motivation / use case for changing the behavior?
Proper integration of this package into my application.

Please tell us about your environment:
Using Windows 7, Visual Studio 2015, npm 3.10.8

  • @ng-idle version: 2.x
    Using ng2-idle 2.0.0-beta.12

  • Angular version: 2.x
    Using angular 4.3.5

  • Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]
    Using Google Chrome and IE 11

  • Language: [all | TypeScript X.X | ES6/7 | ES5]
    Using Typescript 2.4.2, ES5/ES2015

  • Node: node --version =
    Using node version 6.9.1

Re-enter angular2 component cause multiple 'Idle' instance subscribing

In my application, there is a necessary to frequently re-visit a core component. I follow the example to reset the idle using idle.watch() every time the component class constructs. The behaviour is wrong so that each visit will create a running instance. Thus multiple onTimeout, onIdleEnd event will fire together when due. Even if I have programmably enforce idle.stop when the component onDestroy.

Uncaught Invalid provider - only instances of Provider and Type are allowed

After applying gulp-webpack to my ts scripts, running my application gets this error in Chrome:

Uncaught Invalid provider - only instances of Provider and Type are allowed, got: [object Object]

When I remove the IDLE_PROVIDERS from the bootstrap method it works fine.

Environment:
Angular2: RC1
ng2-idle: 1.0.0-alpha.12

Logout using ng2-idle

My problem is that when click on the logout button ng2-idle continues working. And to try to solve this problem I set again the setIdle and setTimeout functions for 1 second.

However, when the user is transferred to the login screen, the app takes 1 second to give the timeout.

I like to know if have any way of forcing the timeout or end ng2-idle after click the logout button that call logout() function.

 import {Component} from '@angular/core';
 import {Router} from "@angular/router";
 import {Http, Headers} from "@angular/http";
 import {NgClass} from '@angular/common';
 import {Observable} from "rxjs/Observable";
 import 'rxjs/Rx';
 import {HeaderService} from './header.service';
 import {Idle, DEFAULT_INTERRUPTSOURCES} from 'ng2-idle/core';

 @Component({
      selector: 'my-header',
      templateUrl: './js/app/header/header.component.html',
      styleUrls: ['./js/app/header/header.component.css']
 })

 export class HeaderComponent {
      nome = localStorage['nome'];
      constructor(private _router: Router, private _http: Http, private _headerService: HeaderService, private idle: Idle) {
           idle.setIdle(5);
           idle.setTimeout(1800);
           idle.setInterrupts(DEFAULT_INTERRUPTSOURCES);

           idle.onTimeoutWarning.subscribe((countdown:number) => {
             console.log('TimeoutWarning: ' + countdown);
           });

           idle.onTimeout.subscribe(() => {
             console.log('Timeout');
             localStorage.clear();
             this._router.navigate(['/auth', {sessionExpirate: 'true'}]);
           });
           idle.watch();
      }

      logout() {
           this.idle.setIdle(1);
           this.idle.setTimeout(1);
           this.idle.setInterrupts(DEFAULT_INTERRUPTSOURCES);
           this._headerService.exit()
                .subscribe(
                     data => {
                          this.idle.onTimeout.subscribe(() => {
                               console.log('Timeout');
                               localStorage.clear();
                               this._router.navigate(['/auth']);
                     },
                     error => console.log(error)
                )}
           )
      }  
 }

When idleStart is called don't toggleInterrupts(false)

Currently in Idle.prototype.toggleState when idleStart triggers it triggers the this.toggleInterrupts(false) which never allows idleEnd to occur. Seems like there needs to be one more condition here of not just this.idling but also the parent that called toggleState.

Timeout is not occurring as per configuration - inconsistent behavior

I'm submitting a ... (check one with "x")

[ ] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here, instead see https://github.com/HackedByChinese/ng2-idle/blob/master/CONTRIBUTING.md#getting-help

Current behavior
Whatever timeout is configured in settimeout the idle period and timeout did not end as per configuration. It has been observed that the last expiry value is not calculating it properly. Sometimes it did not fire timeout event after it occurs first time. This is mostly occuring when you set the large number in that timeout period.

Expected behavior

The timeout should happen whatever is configured in setTimeout.

Minimal reproduction of the problem with instructions
Settimeout for 60 second interval and 60 seconds in setIdle. The timeout occurs at anytime or sometimes did not occur at all.

What is the motivation / use case for changing the behavior?

Please tell us about your environment:
OS windows-10

  • @ng-idle version: 2.x
    2.0.0-beta.12

  • Angular version: 2.x
    Angular-4

  • Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]
    All browser

  • Language: [all | TypeScript X.X | ES6/7 | ES5]
    Typescript

  • Node: node --version =

Improve scrolling performance with passive event listeners

I'm submitting a ... (check one with "x")

[ ] bug report => search github for a similar issue or PR before submitting
[X] feature request
[ ] support request => Please do not submit support request here, instead see https://github.com/HackedByChinese/ng2-idle/blob/master/CONTRIBUTING.md#getting-help

Current behavior
Adding default list of event listeners (DEFAULT_INTERRUPTSOURCES) causes warnings in Angular4.
EX:
[Violation] Added non-passive event listener to a scroll-blocking 'mousewheel' event. Consider marking event handler as 'passive' to make the page more responsive.
[Violation] Added non-passive event listener to a scroll-blocking 'touchstart' event. Consider marking event handler as 'passive' to make the page more responsive.

Expected behavior
Add event listeners in passive mode.

Minimal reproduction of the problem with instructions
const idle = new Idle();
idle.setInterrupts(DEFAULT_INTERRUPTSOURCES);
idle.watch();

What is the motivation / use case for changing the behavior?
Improved performance.

  • @ng-idle version: 2.0.0-beta.12

  • Angular version: 4.2.2

  • Browser: Chrome 51+

  • Language: all

  • Node: v6.10.3

idleEnd is not called if user becomes idle while focus is in another window

I'm submitting a ... (check one with "x")

[x] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here, instead see https://github.com/HackedByChinese/ng2-idle/blob/master/CONTRIBUTING.md#getting-help

Current behavior

Currently, if I allow the idle period to start while my focus is in another window (such as another application besides my browser), the idle period will not end when I return to the browser, click around with the mouse, type keys, etc. It works as expected only if the user becomes idle while focus is inside the window, which is not desired, since most users will become idle while in other windows.

Expected behavior

The idle period should end regardless of where the focus was when it began.

Minimal reproduction of the problem with instructions

Take appropriate steps to activate ng2idle in your application (such as logging in).
Move the mouse to another window besides the browser and shift the focus there by clicking.
Wait for your application to become idle.
Move the mouse back into the application and click to move the focus back.
Click or type keys to end the idle status.
The application will not become active un-idle.

I'm using the following initialization:
init () {
let interruptSource: WindowInterruptSource = new WindowInterruptSource('mousemove keydown DOMMouseScroll mousewheel mousedown touchstart touchmove scroll');
// sets the default interrupts, in this case, things like clicks, scrolls, touches to the document
this.idle.setInterrupts([interruptSource, new StorageInterruptSource()]);

// Subscribe to idle events. Add your logic on how the application should respond, such as displaying
this.keepalive.onPing.subscribe(() => {
  this.ngZone.run(() => {
      console.log("In keepalive ping");
  });
});
this.idle.onTimeout.subscribe(() => {
  this.ngZone.run(() => {
     console.log("The user would be logout now");
  });
});

// a warning dialog onIdleStart, or redirecting to logout page onTImeout, etc.
this.idle.onIdleStart.subscribe(() => {
  this.ngZone.run(() => {
    console.log('IdleStart');
  });
});
  this.idle.onTimeoutWarning.subscribe((countdown) => {
  this.ngZone.run(() => {
    console.log("Countdown", countdown);
  });
 });
this.idle.onIdleEnd.subscribe(() => {
  this.ngZone.run(() => {
     console.log("Idle ended");
 });
});

// start watching for idleness right away.
this.start();
}

start () {
this.ngZone.runOutsideAngular(() => {
  this.idle.watch();
});

}

What is the motivation / use case for changing the behavior?

Please tell us about your environment:

I'm using a Mac with Chrome, but have seen the same results on Browserstack emulating the Windows environment with both Chrome and Firefox.

  • @ng-idle version: 2.0.0-beta.11
  • Angular version: 2.4.1
  • Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]

Chrome, Firefox

  • Language: [all | TypeScript X.X | ES6/7 | ES5]
    Typescript

  • Node: node --version = 6.5.0

EDIT: Seems related to #40 - when not running this.idle.watch outside of ngZone, it seems to behave correctly - but then Protractor tests fail.

Example code tests timeout and fail

I'm submitting a ... (check one with "x")

[X] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here, instead see https://github.com/HackedByChinese/ng2-idle/blob/master/CONTRIBUTING.md#getting-help

Current behavior

Following the example code at https://hackedbychinese.github.io/ng2-idle. When I run the tests, they timeout with this error:

Error: Timeout - Async callback was not invoked within timeout specified by jasmine.DEFAULT_TIMEOUT_INTERVAL.

If I remove the call to this.idle.watch(), the tests don't timeout.

Expected behavior
The tests should run and pass without timing out.

Minimal reproduction of the problem with instructions
I create a new project with angular-cli (RC2), add the example code, validate the example works in the UI, run the tests using ng test, the tests now fail with a timeout.

What is the motivation / use case for changing the behavior?
It would be nice to get the tests to work.

Please tell us about your environment:
MAC Sierra

  • @ng-idle version: 2.x
    2.0.0-beta.8

  • Angular version: 2.x
    2.4

  • Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Chrome

  • Language: [all | TypeScript X.X | ES6/7 | ES5]
    Typescript

  • Node: node --version =
    6.9.4

onIdleEnd fails to trigger on second (and subsequent) visits to the view

I'm submitting a ... (check one with "x")

[x] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here, instead see https://github.com/HackedByChinese/ng2-idle/blob/master/CONTRIBUTING.md#getting-help

Current behavior
I have two routes at app root level - login (LoginComponent) and content (ContentComponent).

Only content component has ng2-idle configured in its constructor.

On first entry/visit to content view everything works fine.

However, if I go to logout (or any other view) and come back to content, the interrupts are not detected by ng2-idle and onIdleStart gets triggered after the timeout period! Even after that no matter how much I click on the screen or scroll etc, the onIdleEnd event is not triggered and onIdleTimeout gets triggered. After that everything again starts works well.

Expected behavior

ng2-idle should work consistently on first visit or subsequent visits to the route

Minimal reproduction of the problem with instructions

Please visit the following Plunk to check the bug:
https://plnkr.co/edit/OHhNJHYrmx0oWkIqYq7V?p=preview

What is the motivation / use case for changing the behavior?

Idle timeout is used only for protected content. It is never used for login page.

Please tell us about your environment:

OSx (macOS Sierra)
VSCode
NPM
Node.js

  • @ng-idle version: 2.x

latest

  • Angular version: 2.x

2.4.4

  • Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]

Checked on Chrome, Safari & Firefox

  • Language: [all | TypeScript X.X | ES6/7 | ES5]
    Typescript

  • Node: node --version =
    7.4.0

Switch to Angular 2.0.0

Hi everyone,

After upgraded my project to Angular 2.0.0, I can´t use browserify to generate bundle.js because ng2-idle throws "no provider for Http!" exception when I try to load my app from the browser (as I said, using bundle.js generated by browserify).

If I remove ng2-idle dependency from my components, I don´t get this exception and the app works flawlessly.

So, I suppose that ng2-idle should be switched to Angular 2.0.0. Is this statement correct?

Is there anything that I can do to overcome this problem?

Thanks in advance.

Tiago Peixoto.

Suggestion: Remove dev dependency on global packages

In package.json:
`- "postinstall": "typings install",

  • "test": "gulp test"
  • "gulp": "node node_modules/.bin/gulp",
  • "typings": "node node_modules/.bin/typings",
  • "test": "npm run gulp test",
  • "postinstall": "npm run typings -- install"`

Now gulp install (global gulp) is npm run gulp install.
This approach, while a little more verbose, is more accommodating for users or CI environments with a different version of typings or gulp installed globally.

Feature request: allow keepalive.request() to accept a function

I'm submitting a ... (check one with "x")

[ ] bug report => search github for a similar issue or PR before submitting
[x] feature request
[ ] support request => Please do not submit support request here, instead see https://github.com/HackedByChinese/ng2-idle/blob/master/CONTRIBUTING.md#getting-help

Current behavior

The keepalive module accepts a string or Request in request() for configuring the ping request.

Expected behavior

I'd like to have the ability to pass a function that returns a promise.

Minimal reproduction of the problem with instructions

n/a

What is the motivation / use case for changing the behavior?

I have an app that needs to add special headers to HTTP requests. I extended Angular's Http to enable this. I'd rather use a service that I already wrote instead of manually constructing the Request to pass to keepalive.request().

Please tell us about your environment:

Idea, npm, linux

  • @ng-idle version: 2.x
  • Angular version: 2.x
  • Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]

All

  • Language: [all | TypeScript X.X | ES6/7 | ES5]
    All

  • Node: node --version = 6.10.3

Thank you!

Type Error: Cannot read property 'getTime' of null

I'm submitting a ... (check one with "x")

[ x] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here, instead see https://github.com/HackedByChinese/ng2-idle/blob/master/CONTRIBUTING.md#getting-help

Current behavior

When Idle start: onIdleStart:

core.es5.js:1084 ERROR TypeError: Cannot read property 'getTime' of null
at watchFn (idle.js:202)
at ZoneDelegate.webpackJsonp.1271.ZoneDelegate.invokeTask (zone.js:424)
at Object.onInvokeTask (core.es5.js:4140)
at ZoneDelegate.webpackJsonp.1271.ZoneDelegate.invokeTask (zone.js:423)
at Zone.webpackJsonp.1271.Zone.runTask (zone.js:191)
at ZoneTask.invoke (zone.js:486)
at timer (zone.js:1512)

Expected behavior

Subscription to onIdleStart should be triggered.

Minimal reproduction of the problem with instructions

This is the method used in AppComponent

constructor(private idle: Idle) {
   this.setupIdle();
}

 private setupIdle() {
    this.idle.setIdle(20);

    this.idle.onIdleStart.subscribe(() => {
        ....
    });

    this.resetIdle();
  }

private resetIdle() {
    this.idle.watch(true);
  }

What is the motivation / use case for changing the behavior?

Auto logout when user idle

Please tell us about your environment:

Windows 10, IntelliJ IDEA, NPM, Node.js

  • @ng-idle version: 2.x

"@ng-idle/core": "^2.0.0-beta.11"

  • Angular version: 2.x

"@angular/core": "^4.1.1"

  • Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]

Chrome 58.0.3029.110

  • Language: [all | TypeScript X.X | ES6/7 | ES5]
    TypeScript

  • Node: node --version =
    v6.10.3

Angular RC5 Support

There is already a fixed merge for for RC5 support. Can you publish a new version to NPM?

br

DOM refreshes and changes interactive elements back to "default"

I'm submitting a ... (check one with "x")

[x] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here, instead see https://github.com/HackedByChinese/ng2-idle/blob/master/CONTRIBUTING.md#getting-help

Current behavior
I have a component like this:

<div *ngFor="let item of items">
  <item-main [item]="item"></item-main>
  <item-expanded *ngIf="item.expanded" [item]="item"></item-expanded>
</div>

Clicking on <item-main> toggles the view of <item-expanded>
This works.

However, after I click on <item-main>, 5000ms later, the IDLE_START event is dispatched and the DOM updates and the <item-expanded> disappears. (however, item.expanded is still set to true...)

Expected behavior
Clicking on <item-main> toggles the view of <item-expanded> and it should not disappear after 5000ms

Minimal reproduction of the problem with instructions

Our package.json is:

    "@ng-idle/core": "2.0.0-beta.4",
    "@ng-idle/keepalive": "2.0.0-beta.4",

What is the motivation / use case for changing the behavior?

I don't know why the UI changes even though the core object used by ngIf doesn't change...

Please tell us about your environment:

Running on mac
NPM = 4.1.2
NODE = 7.5.0
Angular = 2.2.4

  • @ng-idle version: 2.0.0-beta.4
  • Angular version: 2.2.4
  • Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]
  • Language: [TypeScript]

  • Node: node --version =

Error: No provider for KeepaliveSvc! at NoProviderError.BaseError

When using the "ng2-idle" component without the "ng2-idle-keepalive", the sample documentation on how to use causes me to get the following error when using Angular2 (currently using 2.1.x):

Error: No provider for KeepaliveSvc! at NoProviderError.BaseError [as constructor]

However, I can get around this but doing both of the following...

@NgModule({
	providers: [
        IDLE_PROVIDERS, {provide: KeepaliveSvc, useValue: undefined}, <-- insert a fake KeepaliveSvc injectable
	],

and

export class AppComponent {
    private configureIdleBehavior() {
        // this._idle.setKeepaliveEnabled(false); //must comment this out, else app wants a valid KeepaliveSvc

My fix was pieced together with the help of some other issues but wanted to report it here so the documentation on the main page can be updated accordingly to help others getting bitten by this, or to actually fix the providers in the component to work properly with the official Angular 2+ releases.

Runtime error in StorageInterruptSource.filterEvent

Current behavior

ng2-idle fails with error:

ERROR TypeError: Cannot read property 'indexOf' of null at StorageInterruptSource.webpackJsonp../node_modules/@ng-idle/core/src/storageinterruptsource.js.StorageInterruptSource.filterEvent (storageinterruptsource.js:22) at SafeSubscriber.handler [as _next] (eventtargetinterruptsource.js:33) at SafeSubscriber.webpackJsonp../node_modules/rxjs/Subscriber.js.SafeSubscriber.__tryOrUnsub (Subscriber.js:238) at SafeSubscriber.webpackJsonp../node_modules/rxjs/Subscriber.js.SafeSubscriber.next (Subscriber.js:185) at Subscriber.webpackJsonp../node_modules/rxjs/Subscriber.js.Subscriber._next (Subscriber.js:125) at Subscriber.webpackJsonp../node_modules/rxjs/Subscriber.js.Subscriber.next (Subscriber.js:89) at ThrottleTimeSubscriber.webpackJsonp../node_modules/rxjs/operator/throttleTime.js.ThrottleTimeSubscriber._next (throttleTime.js:93) at ThrottleTimeSubscriber.webpackJsonp../node_modules/rxjs/Subscriber.js.Subscriber.next (Subscriber.js:89) at handler (FromEventObservable.js:134) at ZoneDelegate.webpackJsonp../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:424)

Expected behavior

No such RTE.

Minimal reproduction of the problem with instructions

Failing on Chrome with code taken from ng2-idle examples:

idle.setIdle(5); idle.setTimeout(10 * 60); idle.setInterrupts(DEFAULT_INTERRUPTSOURCES); idle.onTimeout.subscribe(() => { console.log('timeout'); }); this.idle.watch();

Please tell us about your environment:

Os-x, Chrome (both latest).

  • **@ng-idle version: 2.0.0-beta.12
  • Angular version: 4.1.3
  • Node: node --version = 7.9.0

Latest beta versions not included in npm

We are attempting to update to the latest version of angular (2.3.0) using npm. In this, we recieved an error for your old ng2-idle-keepalive project.
image

After noticing you had merged the project into ng2-idle, we updated our package.json to request version 2.0.0-beta.4. It seems the latest packages haven't been published
image

Are you still supporting npm packages?
https://www.npmjs.com/package/ng2-idle

Idle detection not consistent in IE11

I'm submitting a ... (check one with "x")

[x ] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here, instead see https://github.com/HackedByChinese/ng2-idle/blob/master/CONTRIBUTING.md#getting-help

Current behavior
When using IE11 moving the mouse does not stop idle. (Using DEFAULT_INTERRUPTSOURCES)

Expected behavior
On other browsers tested (Chrome, Firefox and Edge) moving the mouse stops idle timeout

Minimal reproduction of the problem with instructions
Start up ng2-idle example https://hackedbychinese.github.io/ng2-idle in IE11. Wait for timeout countdown to start. Moving mouse does not stop countdown.

What is the motivation / use case for changing the behavior?

Please tell us about your environment:

  • @ng-idle version: 2.0.0-beta.4

  • Angular version: 2.2.1

  • Browser: IE 11

  • Language: [all | TypeScript 2.0.3 | ES6/7 | ES5]

  • Node: node --version = 6.9.1

LocalStorageExpiry bug

I'm submitting a ... (check one with "x")

[x] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here, instead see https://github.com/HackedByChinese/ng2-idle/blob/master/CONTRIBUTING.md#getting-help

Current behavior

When I call the stop function on my Idle. This function call 'this.expiry.last(null)' with expiry instance of LocalStorageExpiry. The LocalStorageExpiry don't check the null value and throw the TypeError: Cannot read property 'getTime' of null TypeError: Cannot read property 'getTime' of null at LocalStorageExpiry

Expected behavior

Check null value when we set expiry in LocalStorageExpiry

Minimal reproduction of the problem with instructions

What is the motivation / use case for changing the behavior?

Please tell us about your environment:

  • @ng-idle version: 2.0.0(beta.5)
  • Angular version: 2.x
  • Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]
  • Language: [all | TypeScript X.X | ES6/7 | ES5]

  • Node: node --version =

interrupt from modal ok button

Angular4 with @ng2-idle trying to capture the inactivity of the user.

code example link
https://hackedbychinese.github.io/ng2-idle/

I am trying to customize it so every time user goes idle i show modal with ok button. and user will able to resume only ok is clicked on the modal.

on page load default interrupts are on

idle.setInterrupts(DEFAULT_INTERRUPTSOURCES); 

on idleStart i show my modal and count down begins
on onIdleEnd i close my modal

when modal is open i want to disable DEFAULT_INTERRUPTSOURCES only manual interrupt so i called idle.clearInterrupts() and on modal ok press event calling idle.interrupt(true);
once modal is close i set idle.setInterrupts(DEFAULT_INTERRUPTSOURCES); again.

does not seems to work very well. after modal close and open again it does not car about DEFAULT_INTERRUPTSOURCES and on setIdle time it goes automiticaly idle mode even though user interacts with the UI.

not AoT compatible? (no exported member 'IDLE_PROVIDERS')

Hi this works fine in dev mode and regular peoduction mode but AoT does not compile. It gives node_modules/ng2-idle/core"' has no exported member 'IDLE_PROVIDERS'. and node_modules/ng2-idle-keepalive/core"' has no exported member 'KEEPALIVE_PROVIDERS'

This is with angular 2.1.0

node_modules/@ng-idle/core.js not found

Hi, I just update NgIdleModule to beta 2.0.0-beta.4. My code looks like:

import {NgIdleModule} from '@ng-idle/core';
...

imports: [NgIdleModule.forRoot()]

But I'm receiving
GET http://localhost:5555/node_modules/@ng-idle/core.js 404 Not Found

How to get library to work with Angular 2 Webpack Starter

I have a project where I am using the Angular2 Webpack Starter project.

Because you've referfenced specific versions of rxjs etc., I get a node_modules directory in the node_modules/ng2-idle directory....

I get all sort of reference problems due to rxjs already being including in my typings
image

Have you been able to include ng2-idle in a webpack project?

If I delete the child node_modules directory, it seems to compile OK.
--mike

Too many warnings thrown saying .ts files are missing

I'm submitting a ... (check one with "x")

[X ] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here, instead see https://github.com/HackedByChinese/ng2-idle/blob/master/CONTRIBUTING.md#getting-help

Current behavior
Getting the following list of error when built with latest CLI using ng Eject option

WARNING in ./~/@ng-idle/core/index.js
Cannot find source file '../../../modules/core/index.ts': Error: Can't resolve '../../../modules/core/index.ts' in 'D:\NCP UI FrameWork\A2- Working space\ncpapp-8th version\node_modules@ng-idle\core'
@ ./src/app/core/ncpapp.module.ts 22:0-45
@ ./src/main.ts
@ multi (webpack)-dev-server/client?http://localhost:8080 ./src/main.ts

WARNING in .//@ng-idle/core/src/documentinterruptsource.js
Cannot find source file '../../../../modules/core/src/documentinterruptsource.ts': Error: Can't resolve '../../../../modules/core/src/documentinterruptsource.ts' in 'D:\NCP UI FrameWork\A2- Working space\ncpapp-8th version\node_modules@ng-idle\core\src'
@ ./
/@ng-idle/core/index.js 1:0-72 7:0-46
@ ./src/app/core/ncpapp.module.ts
@ ./src/main.ts
@ multi (webpack)-dev-server/client?http://localhost:8080 ./src/main.ts

WARNING in .//@ng-idle/core/src/storageinterruptsource.js
Cannot find source file '../../../../modules/core/src/storageinterruptsource.ts': Error: Can't resolve '../../../../modules/core/src/storageinterruptsource.ts' in 'D:\NCP UI FrameWork\A2- Working space\ncpapp-8th version\node_modules@ng-idle\core\src'
@ ./
/@ng-idle/core/index.js 2:0-70 9:0-45
@ ./src/app/core/ncpapp.module.ts
@ ./src/main.ts
@ multi (webpack)-dev-server/client?http://localhost:8080 ./src/main.ts

WARNING in .//@ng-idle/core/src/idle.js
Cannot find source file '../../../../modules/core/src/idle.ts': Error: Can't resolve '../../../../modules/core/src/idle.ts' in 'D:\NCP UI FrameWork\A2- Working space\ncpapp-8th version\node_modules@ng-idle\core\src'
@ ./
/@ng-idle/core/index.js 3:0-27
@ ./src/app/core/ncpapp.module.ts
@ ./src/main.ts
@ multi (webpack)-dev-server/client?http://localhost:8080 ./src/main.ts

WARNING in .//@ng-idle/core/src/interruptargs.js
Cannot find source file '../../../../modules/core/src/interruptargs.ts': Error: Can't resolve '../../../../modules/core/src/interruptargs.ts' in 'D:\NCP UI FrameWork\A2- Working space\ncpapp-8th version\node_modules@ng-idle\core\src'
@ ./
/@ng-idle/core/index.js 4:0-36
@ ./src/app/core/ncpapp.module.ts
@ ./src/main.ts
@ multi (webpack)-dev-server/client?http://localhost:8080 ./src/main.ts

WARNING in .//@ng-idle/core/src/interruptsource.js
Cannot find source file '../../../../modules/core/src/interruptsource.ts': Error: Can't resolve '../../../../modules/core/src/interruptsource.ts' in 'D:\NCP UI FrameWork\A2- Working space\ncpapp-8th version\node_modules@ng-idle\core\src'
@ ./
/@ng-idle/core/index.js 5:0-38
@ ./src/app/core/ncpapp.module.ts
@ ./src/main.ts
@ multi (webpack)-dev-server/client?http://localhost:8080 ./src/main.ts

WARNING in .//@ng-idle/core/src/eventtargetinterruptsource.js
Cannot find source file '../../../../modules/core/src/eventtargetinterruptsource.ts': Error: Can't resolve '../../../../modules/core/src/eventtargetinterruptsource.ts' in 'D:\NCP UI FrameWork\A2- Working space\ncpapp-8th version\node_modules@ng-idle\core\src'
@ ./
/@ng-idle/core/index.js 6:0-49
@ ./src/app/core/ncpapp.module.ts
@ ./src/main.ts
@ multi (webpack)-dev-server/client?http://localhost:8080 ./src/main.ts

WARNING in .//@ng-idle/core/src/windowinterruptsource.js
Cannot find source file '../../../../modules/core/src/windowinterruptsource.ts': Error: Can't resolve '../../../../modules/core/src/windowinterruptsource.ts' in 'D:\NCP UI FrameWork\A2- Working space\ncpapp-8th version\node_modules@ng-idle\core\src'
@ ./
/@ng-idle/core/index.js 8:0-44
@ ./src/app/core/ncpapp.module.ts
@ ./src/main.ts
@ multi (webpack)-dev-server/client?http://localhost:8080 ./src/main.ts

WARNING in .//@ng-idle/core/src/keepalivesvc.js
Cannot find source file '../../../../modules/core/src/keepalivesvc.ts': Error: Can't resolve '../../../../modules/core/src/keepalivesvc.ts' in 'D:\NCP UI FrameWork\A2- Working space\ncpapp-8th version\node_modules@ng-idle\core\src'
@ ./
/@ng-idle/core/index.js 10:0-35
@ ./src/app/core/ncpapp.module.ts
@ ./src/main.ts
@ multi (webpack)-dev-server/client?http://localhost:8080 ./src/main.ts

WARNING in .//@ng-idle/core/src/idleexpiry.js
Cannot find source file '../../../../modules/core/src/idleexpiry.ts': Error: Can't resolve '../../../../modules/core/src/idleexpiry.ts' in 'D:\NCP UI FrameWork\A2- Working space\ncpapp-8th version\node_modules@ng-idle\core\src'
@ ./
/@ng-idle/core/index.js 11:0-33
@ ./src/app/core/ncpapp.module.ts
@ ./src/main.ts
@ multi (webpack)-dev-server/client?http://localhost:8080 ./src/main.ts

WARNING in .//@ng-idle/core/src/simpleexpiry.js
Cannot find source file '../../../../modules/core/src/simpleexpiry.ts': Error: Can't resolve '../../../../modules/core/src/simpleexpiry.ts' in 'D:\NCP UI FrameWork\A2- Working space\ncpapp-8th version\node_modules@ng-idle\core\src'
@ ./
/@ng-idle/core/index.js 12:0-35
@ ./src/app/core/ncpapp.module.ts
@ ./src/main.ts
@ multi (webpack)-dev-server/client?http://localhost:8080 ./src/main.ts

WARNING in .//@ng-idle/core/src/localstorage.js
Cannot find source file '../../../../modules/core/src/localstorage.ts': Error: Can't resolve '../../../../modules/core/src/localstorage.ts' in 'D:\NCP UI FrameWork\A2- Working space\ncpapp-8th version\node_modules@ng-idle\core\src'
@ ./
/@ng-idle/core/index.js 13:0-35
@ ./src/app/core/ncpapp.module.ts
@ ./src/main.ts
@ multi (webpack)-dev-server/client?http://localhost:8080 ./src/main.ts

WARNING in .//@ng-idle/core/src/localstorageexpiry.js
Cannot find source file '../../../../modules/core/src/localstorageexpiry.ts': Error: Can't resolve '../../../../modules/core/src/localstorageexpiry.ts' in 'D:\NCP UI FrameWork\A2- Working space\ncpapp-8th version\node_modules@ng-idle\core\src'
@ ./
/@ng-idle/core/index.js 14:0-41
@ ./src/app/core/ncpapp.module.ts
@ ./src/main.ts
@ multi (webpack)-dev-server/client?http://localhost:8080 ./src/main.ts

WARNING in .//@ng-idle/core/src/module.js
Cannot find source file '../../../../modules/core/src/module.ts': Error: Can't resolve '../../../../modules/core/src/module.ts' in 'D:\NCP UI FrameWork\A2- Working space\ncpapp-8th version\node_modules@ng-idle\core\src'
@ ./
/@ng-idle/core/index.js 16:0-44
@ ./src/app/core/ncpapp.module.ts
@ ./src/main.ts
@ multi (webpack)-dev-server/client?http://localhost:8080 ./src/main.ts

WARNING in .//@ng-idle/core/src/interrupt.js
Cannot find source file '../../../../modules/core/src/interrupt.ts': Error: Can't resolve '../../../../modules/core/src/interrupt.ts' in 'D:\NCP UI FrameWork\A2- Working space\ncpapp-8th version\node_modules@ng-idle\core\src'
@ ./
/@ng-idle/core/src/idle.js 3:0-40
@ ./~/@ng-idle/core/index.js
@ ./src/app/core/ncpapp.module.ts
@ ./src/main.ts
@ multi (webpack)-dev-server/client?http://localhost:8080 ./src/main.ts

WARNING in .//@ng-idle/core/src/alternativestorage.js
Cannot find source file '../../../../modules/core/src/alternativestorage.ts': Error: Can't resolve '../../../../modules/core/src/alternativestorage.ts' in 'D:\NCP UI FrameWork\A2- Working space\ncpapp-8th version\node_modules@ng-idle\core\src'
@ ./
/@ng-idle/core/src/localstorage.js 2:0-58
@ ./~/@ng-idle/core/index.js
@ ./src/app/core/ncpapp.module.ts
@ ./src/main.ts
@ multi (webpack)-dev-server/client?http://localhost:8080 ./src/main.ts

Expected behavior
NO warnings should be thrown

Minimal reproduction of the problem with instructions
node: 6.9.5
os: win32 x64
@angular/common: 2.4.8
@angular/compiler: 2.4.8
@angular/compiler-cli: 2.4.8
@angular/core: 2.4.8
@angular/forms: 2.4.8
@angular/http: 2.4.8
@angular/platform-browser: 2.4.8
@angular/platform-browser-dynamic: 2.4.8
@angular/platform-server: 2.4.8
@angular/router: 3.4.8
@angular/cli: 1.0.0-beta.32.3
In this config after using ng eject and running command npm start

  • Node: node --version = v6.9.5

@ngIdle not working if we refresh the page manually if am at localhost:8000/home and my @ngIdle logic on localhost:8000/login .

I'm submitting a ... (check one with "x")

[ ] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here, instead see https://github.com/HackedByChinese/ng2-idle/blob/master/CONTRIBUTING.md#getting-help

Current behavior

Expected behavior

Minimal reproduction of the problem with instructions

What is the motivation / use case for changing the behavior?

Please tell us about your environment:

  • @ng-idle version: 2.x
  • Angular version: 4
  • Browser: [all | Chrome xx | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]
  • Language: [all | TypeScript X.X | ES6/7 | ES5]

  • Node: node --version =

documentation

Hi,

It would be great to have a code snippet to see how to use the Idle service.

Thanks,
David

Custom Expiry not functioning as expected

I'm submitting a ... (check one with "x")

[X] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here, instead see https://github.com/HackedByChinese/ng2-idle/blob/master/CONTRIBUTING.md#getting-help

Current behavior
Created a cookie based IdleExpiry that stores lastValue as a cookie. Activity in one tab does not prevent timeout in another tab.
I was able to get something close to what I wanted by modifying the toggleState method in Idle and inserting the following at the top of the function:
if (!this.expiry.isExpired()) { return; }

This checks the cookie and prevents expiration.

Expected behavior
Activity in one tab prevents timeout in all tabs.

Minimal reproduction of the problem with instructions
Replace SimpleExpiry with the following class
`@Injectable()
export class CookieExpiry extends IdleExpiry {
private lastValue: Date = undefined;

constructor(
private cookieService: CookieService
) {
super();
}

/*

  • Gets or sets the last expiry date.
  • @param value - The expiry value to set; omit to only return the value.
  • @return The current expiry value.
    */
    last(value?: Date): Date {
    if (value !== void 0 && value !== undefined) {
    this.lastValue = value;
    let expireDate = new Date(new Date().setFullYear(new Date().getFullYear() + 1));
    this.cookieService.put('idle-timeout', this.lastValue.toUTCString(), { expires: expireDate} );
    } else {
    if (this.cookieService.get('idle-timeout') !== undefined) {
    this.lastValue = new Date(this.cookieService.get('idle-timeout'));
    } else {
    this.lastValue = undefined;
    }
    }
    return this.lastValue;
    }

/*

  • Returns whether or not it is expired.
  • @return True if expired; otherwise, false.
    */
    isExpired(): boolean {
    let expiry = this.last();
    return expiry !== undefined && expiry <= this.now();
    }
    }
    `
    Open app on two tabs, move mouse to trigger activity on one tab while allowing other tab to remain inactive.

What is the motivation / use case for changing the behavior?
Allow activity on one tab to keep other tabs from expiring. Since all tabs are using the same session cookie the "out-of-focus" tab is expiring session for all tabs.

Please tell us about your environment:
Ubuntu 16.04
NPM
Webpack-dev server

  • @ng-idle version: 2.x
    "@ng-idle/core": "^2.0.0-beta.4"

  • Angular version: 2.x
    "@angular/core": "2.1.2"

  • Browser:
    ALL

  • Language:
    ALL

  • Node: node --version =
    v5.12.0

`npm run format` doesn't work

I'm submitting a ... (check one with "x")

[x] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here, instead see https://github.com/HackedByChinese/ng2-idle/blob/master/CONTRIBUTING.md#getting-help

Current behavior
$ npm run format

> [email protected] format /Users/pivotal/workspace/ng2-idle
> gulp clang:format

[10:11:55] No gulpfile found

npm ERR! Darwin 16.4.0
npm ERR! argv "/usr/local/Cellar/node/7.7.4/bin/node" "/usr/local/bin/npm" "run" "format"
npm ERR! node v7.7.4
npm ERR! npm  v4.1.2
npm ERR! code ELIFECYCLE
npm ERR! [email protected] format: `gulp clang:format`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] format script 'gulp clang:format'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the ng-idle-src package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     gulp clang:format
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs ng-idle-src
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!     npm owner ls ng-idle-src
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!     /Users/pivotal/workspace/ng2-idle/npm-debug.log

Expected behavior
npm run format is supposed to use clang-format to clean up the source. Either this should fixed or it should be removed.

Minimal reproduction of the problem with instructions

  • Clone the repo
  • Run npm run format

NoProviderError after RC6 upgrade

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();
}

Watch intervals should be run outside of main Angular zone

I'm submitting a ... (check one with "x")

[ x] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here, instead see https://github.com/HackedByChinese/ng2-idle/blob/master/CONTRIBUTING.md#getting-help

Current behavior

ng2-idle's watching uses setInterval on the main angular zone which is blocking Protractor because it waits until all calls in the main zone are finished.

Expected behavior

setInterval is run outside of the main angular zone so that it doesn't block Protractor.

Minimal reproduction of the problem with instructions

You should be able to add protractor to an app setup for ng2-idle and use protractor --elementExplorer and try to grab an element through Protractor's api.

Workaround
Should preferably deal with this inside of the plugin itself.

    this._ngZone.runOutsideAngular(() => {
      this.idle.watch();
    });

    this.idle.onTimeoutWarning.subscribe((countdown: number) => {
      this._ngZone.run(() => { this.sessionEndCountdown = countdown });
    });

What is the motivation / use case for changing the behavior?

Protractor tests don't work

Please tell us about your environment:

OSX EL Capitan 10.11.6
VS Code

  • @ng-idle version: 2.x

2.0.0-beta.4

  • Angular version: 2.x

2.4.7

  • Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]

ALL

  • Language: [all | TypeScript X.X | ES6/7 | ES5]
    ALL

  • Node: node --version =
    7

idle doesn't work with CKEditor

Hi, the idle function doesn't work with CKEditor. When user typing in the CKEditor, always got idle and timeout. How to fix that?

Thanks

onTimeout event not triggered on the "onResume" event Cordova / Ionic 2

I'm submitting a ...

[ x ] bug report => search github for a similar issue or PR before submitting
[ - ] feature request
[ - ] support request => Please do not submit support request here, instead see https://github.com/HackedByChinese/ng2-idle/blob/master/CONTRIBUTING.md#getting-help

Current behavior
There are three ways to send an app to the "background" (in general). Only in the first scenario, where the hardware button is pushed, the onTimeout event is triggered correctly.

[ x ] Using the home button; works correctly
[ - ] Switching to another app (double tap home button / switch app button); not working
[ - ] Turning the screen off (clicking the off button shortly); not working

Expected behavior

  • Peform the "check" on "all" the resume events / three scenario's above. Or (if that doesn't already happen);
  • Trigger the "check" on a defined event (or be able to define an event on which it needs to be checked), like "resume"
  • Being able to manually trigger the "check" wheter the users' state is idle. e.g. add some logic to the Cordova / Ionic 2 app, bind to the "resume" event and do something like: this.idle.isIdle() => and act on it.

Minimal reproduction of the problem with instructions
Send an Cordova / Ionic 2 app to the background via either the second or third method.

Please tell us about your environment:

  • @ng-idle version: 2.@latest

  • Ionic version: 2.@latest

  • Language: [ TypeScript@latest ]

Add AOT support

I'm submitting a ... (check one with "x")

[x] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here, instead see https://github.com/HackedByChinese/ng2-idle/blob/master/CONTRIBUTING.md#getting-help

Current behavior
If I include ng2-idle in my import modules while doing AOT compile I get the following error:

[11:54:02] Error: Error encountered resolving symbol values statically. Function calls are not supported. Consider replacing the function or lambda...

If I take out the ng2-idle import etc, it works fine.

Related to: angular/angular#11262

Does ng2-idle have support for AoT compilation? I don't see any .metadata.json files.

Please tell us about your environment:
Running with ionic 2, windows 10. typescript.

  • @ng-idle version: 2.0.0-beta.2
  • Angular version: 2.1.1

Timeout is not occurring as per configured setTimeout.

I'm submitting a ... (check one with "x")

[ ] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here, instead see https://github.com/HackedByChinese/ng2-idle/blob/master/CONTRIBUTING.md#getting-help

Current behavior
If we set the setIdle to whatever seconds. It doesn't raise onIdleStart event as per configured time. This happens normally if we set the timeInterval more than 5 seconds.

this.idle.setIdle(30);

It has been observed from console logs that the last value calculation is wrong. last value from LocalStorageExpiry.last() is coming wrong. Below is the sample code -

this.idle.setIdle(30);
const idleTimeout: number = parseInt(10);
// sets a timeout period of 5 seconds. after 10 seconds of inactivity, the user will be considered timed out.
// sets the default interrupts, in this case, things like clicks, scrolls, touches to the document
this.idle.setInterrupts(DEFAULT_INTERRUPTSOURCES);

    const timeout = this.idle.getTimeout();
   
    this.idle.onIdleEnd.subscribe(() => {
        this.logger.debug('You are no longer idle. Click "OK" to close the warning dialog')
    });
    this.idle.onTimeout.subscribe(() => {
        this.logger.debug('Timed out!');          
    });
   
    this.idle.onIdleStart.subscribe(
        () => {
            this.logger.debug('You have gone idle. Idle time period started');
        });
    this.idle.onTimeoutWarning.subscribe((countdown: any) => {
        this.logger.warn('timed out warning dialog - ' + countdown);
      
    });

    // sets the ping interval to 15 seconds
    this.keepalive.interval(15);
    
    this.keepalive.onPing.subscribe(() =>
        log("KeepAlive call"));

    
    this.idle.setTimeout(idleTimeout);
    const timeOutInterval = this.idle.getTimeout(); 

    this.idle.watch(); 

Expected behavior
The onIdleStart event should raised based on setIdle configuration.

Minimal reproduction of the problem with instructions

What is the motivation / use case for changing the behavior?

Please tell us about your environment:
OS10

  • @ng-idle version: 2.x
    2.0.0-beta.12

  • Angular version: 2.x
    Angular -4

  • Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]
    All browser

  • Language: [all | TypeScript X.X | ES6/7 | ES5]
    Typescript

  • Node: node --version =

Switch to Angular 2.0.0 and webpack

Hi guys,

I'm quite new to this environment, I'm sorry if I'll say something stupid, but I really need your help.

I was using your component in a previous version (in development stage) of my application, using SystemJs and Angular RC-6, and all seemed to work properly.
With the release of Angular 2 Final, I started a new project from scratch, switching to webpack (that I still can't figure out :-( )
I added IDLE_PROVIDERS to the providers of my module, like the previous version, but the application is asking me (and it wasn't before) to configure KeepAliveSvc in the providers. I have no need to use the keep-alive function of your component, I only need to manage the idle behaviour.

Tell me whatever you need

Thank you very much

Isaia

Compatibility with Ionic 2 RC0

Hello,

I am using ng2-idle in my ionic 2 beta project. Currently, we are in the process of migrating to ionic 2 RC0 (which updated to Angular 2.0.0 AOT from Angular 2 RC4 )
However, currently, I'm encountering 2 kinds of errors when I include ng2-idle providers.

error in ionic serve command:

bundle dev started...
Error reading template file, "my-component-tpl.html": Error: ENOENT: no file or directory, open 'ionic_app\node_modules\ng2-idle\node_modules@angular\core\src\animation\my-component-tpl.html'

Error reading template file, "my-component-tpl.html": Error: ENOENT: no file or directory, open 'ionic_app\node_modules\ng2-idle-keep-alive\node_modules@angular\core\src\animation\my-component-tpl.html'

Error reading template file, "my-component-tpl.html": Error: ENOENT: no file or directory, open 'ionic_app\node_modules\ng2-idle-keepalive\node_modules@angular\http\src\people.html'

error in browser console

"Unhandled Promise rejection: No provider for Http!; Zone: ; Task: Promise.then; Value:"

My app.module.ts

@NgModule({
  declarations: [ MyApp ] 
  imports: [IonicModule.forRoot(MyApp), HttpModule]
  bootstrap: [IonicApp],
  entryComponents: [MyApp],
  providers: [IDLE_PROVIDERS, KEEP_ALIVE_PROVIDERS]
})
export class AppModule {}

(I'm not familiar yet with the changes in Angular 2.0.0 but I'm guess AOT compiling used by Ionic 2 RC0 may be a factor?)

Can anyone advise? Thanks

DocumentInterruptSource issue with scroll event

I'm submitting a ... (check one with "x")

[x] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here, instead see https://github.com/HackedByChinese/ng2-idle/blob/master/CONTRIBUTING.md#getting-help

Current behavior
I noticed when using my own DocumentInterruptSource instance that the scroll event doesn't trigger for document.documentElement.

However document.onscroll and window.onscroll work as expected so I'm using WindowInterruptSource for now.

Expected behavior
DocumentInterruptSource events should work for document event listeners

Minimal reproduction of the problem with instructions
in the browser console if you type and enter:
document.documentElement.onscroll = function() { console.log('scroll')}
and scroll, nothing happens.

My interrupt sources are:

let interruptSources: DocumentInterruptSource[] = [new DocumentInterruptSource( 'mousemove keydown mousedown touchstart touchmove scroll')];

What is the motivation / use case for changing the behavior?
The default interrupts use DocumentInterruptSource.

Please tell us about your environment:
MacOSX Chrome 55

  • @ng-idle version: 2.x
    Older version 1.0.0-alpha.13

  • Angular version: 2.x
    angular2-rc4

  • Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]
    Chrome 55

  • Language: [all | TypeScript X.X | ES6/7 | ES5]
    Typescript ^1.8.10

  • Node: node --version =
    v6.6.0

ngModule and WebPack

Using the latest version of ng2-Idle, I am not able to get it to work with the full release of Angular 2. I keep getting errors around No Provider for KeepAliveSrv.

To reproduce (using angular-cli):

ng new idleTest

npm install --save ng2-idle

There is no module exposed to add to app.module.ts, so I have to resort to adding IDLE_PROVIDERS to the providers section.

Documentation on InterruptSource

Is it possible to get more documentation on how to implement our own custom interrupt source? I haven't seen this anywhere in the documentation.

In my case, I want the user to no longer be considered idle whenever he moves his mouse or presses a key on the keyboard, not just within the tab, but anywhere on the computer, or at least in the browser.

I'm seeing InterruptSource as an abstract class, but am not sure which properties it wants me to define when I extend from it It also looks like attachFn and detachFn are parameters passed to the constructor when instantiated, but I don't understand what should happen in these functions or what the purpose of them is. I assume attachFn attaches the event it wants to listen to to this somehow but is detachFn called during destruction?

Angular 4 compatibility

I'm submitting a ... (check one with "x")

[ ] bug report => search github for a similar issue or PR before submitting
[x] feature request
[ ] support request => Please do not submit support request here, instead see https://github.com/HackedByChinese/ng2-idle/blob/master/CONTRIBUTING.md#getting-help

Current behavior

npm WARN @ng-idle/[email protected] requires a peer of @angular/common@^2.0.0 but none was installed.
npm WARN @ng-idle/[email protected] requires a peer of @angular/core@^2.0.0 but none was installed.

Expected behavior
npm install --save @ng-idle/core@latest should work with an Angular 4 project.

Minimal reproduction of the problem with instructions
Run npm install --save @ng-idle/core@latest on an Angular 4 project.

What is the motivation / use case for changing the behavior?
We want to upgrade our application to Angular 4, but @ng-idle/core is the only package that we use that doesn't support it yet.

Please tell us about your environment:
macOS, IntelliJ, npm or yarn, webpack

  • @ng-idle version: 2.0.0-beta.9

  • Angular version: 4.0.0

  • Node: node --version = v7.7.4

SetTimeout is throwing error

I'm submitting a ... (check one with "x")

[ ] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here, instead see https://github.com/HackedByChinese/ng2-idle/blob/master/CONTRIBUTING.md#getting-help

Current behavior
setTimeout is throwing error even when passing valid positive number in seconds.
idle.setTimeout(10);

throw new Error(''seconds' can only be 'false' or a positive number.');

Expected behavior
It should not throw error if it passes correct value.

Minimal reproduction of the problem with instructions

What is the motivation / use case for changing the behavior?

Please tell us about your environment:

  • @ng-idle version: 2.x
  • Angular version: 2.x
  • Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]

All browser

  • Language: [all | TypeScript X.X | ES6/7 | ES5]
    Typescript.
  • Node: node --version =

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.