Search code examples
angularng-idle

angular2 - user active and idle


I want to logout (or warn the user) when my user is idle after a period of time in my app. I am using localStroage provider in order to know if my user is logged in or not. I found this question and answer AngularJS $idleProvider and $keepaliveProvider in Angular2 but couldn't find a way to use those solutions. There is no ngZone.onTurnDone and but when I use the ng2-idle I get

Error: SyntaxError: Unexpected token <
at Object.eval (http://127.0.0.1:8080/node_modules/ng2-idle/core.js:12:14)
at eval (http://127.0.0.1:8080/node_modules/ng2-idle/core.js:33:4)
Evaluating http://127.0.0.1:8080/src/@angular/core
Evaluating http://127.0.0.1:8080/node_modules/ng2-idle/core.js
Error loading http://127.0.0.1:8080/src/app/main.js

if you have any idea for me for how can I find out if my user is idle it will be great. Thanks a lot


Solution

  • You need to be aware that ng2-idle leverages Angular2 RC versions and there are module name updates between Beta and RC versions.

    Your error occurs on the following line in the library (file core.js):

    var core_1 = require('@angular/core');
    

    Here is the configuration in such a case:

    System.config({
      map: {
        'ng2-idle': 'node_modules/ng2-idle'
      },
      packages: {
        app: {
          main: './main.ts',
          defaultExtension: 'ts'
        },
        '@angular/core': {
          main: 'core.umd.js',
          defaultExtension: 'js'
        },
        '@angular/compiler': {
          main: 'compiler.umd.js',
          defaultExtension: 'js'
        },
        '@angular/common': {
          main: 'common.umd.js',
          defaultExtension: 'js'
        },
        '@angular/platform-browser-dynamic': {
          main: 'platform-browser-dynamic.umd.js',
          defaultExtension: 'js'
        },
        '@angular/platform-browser': {
          main: 'platform-browser.umd.js',
          defaultExtension: 'js'
        },
        '@angular/http': {
          main: 'http.umd.js',
          defaultExtension: 'js'
        },
        rxjs: {
          defaultExtension: 'js'
        }
        'ng2-idle': {
          defaultExtension: 'js'
        }
      }
    });