Comments (7)
[email protected] and [email protected] have been upgraded to [email protected]
from ng2-idle.
Woot. That seems to work. I assume this issue can be closed. Probably #10 as well.
from ng2-idle.
I'm not much of a webpack user at this point. I grabbed the latest Angular2 Webpack Starter and I'm also having difficulties with it. I've tried it in some other bare angular2 or starter projects and it was fine. Do you have a sample project somewhere?
I ran npm install --save ng2-idle ng2-idle-keepalive
, went to src/vendors.ts
and added
import 'ng2-idle/core';
import 'ng2-idle-keepalive/core';
Then I went to src/main.browser.ts
to bootstrap it by importing the necessary providers and adding them to the bootstrap statement:
import {HTTP_PROVIDERS} from 'angular2/http';
import {IDLE_PROVIDERS} from 'ng2-idle/core';
import {KEEPALIVE_PROVIDERS} from 'ng2-idle-keepalive/core';
return bootstrap(App, [
...ENV_PROVIDERS,
...PROVIDERS,
...DIRECTIVES,
...PIPES,
...APP_PROVIDERS,
...HTTP_PROVIDERS,
...IDLE_PROVIDERS,
...KEEPALIVE_PROVIDERS
])
.catch(err => console.error(err));
Finally, in src/app/app.component.ts
I import Idle
and Keepalive
to configure and start them. Pretty similar to what I've done for other seeds and examples.
I can't even get passed the original bootstrapping. I get this error when trying to import my providers:
Invalid provider - only instances of Provider and Type are allowed, got: [object Object]
zone.js?e3a6:241 Uncaught TypeError: Cannot read property 'getOptional' of undefined
Of course, trying to step through these pieces is proving to be impossible. So whatever, I just copy the definition of IDLE_PROVIDERS and KEEPALIVE_PROVIDERS right into the bootstrapper and that error goes away, but then I get errors about no provider for Http
, which is absolute rubbish.
I need a Webpack adult.
from ng2-idle.
In my project, based on Angular2 Webpack Starter, I'm able to use ng2-idle (and other 3rd party typescript libraries, like ng2-cookies) without the ...
in my bootstrap call, and without explicitly importing anything in vendor.ts. I'm still adding dependencies to vendor.ts, but only for Javascript libraries.
from ng2-idle.
I don't know how @spicywhitefish got it to work, but I couldn't get webpack to play nice. I never got The "Invalid Provider" issue with angular RC6 and "webpack": "^1.13.0", but i am getting the "no provider for Http" bit. I think it is that webpack is keeping ng2-idle-keepalive from finding it, not that it isn't being provided. When I don't include ng2-idle-keepalive, it complains that KeepaliveSvc isn't provided. When I surgically remove that @Optional() keepaliveSvc?: KeepaliveSvc
and references bit in node-modules/ng2-idle/src/idle.js, then Idle works fine by itself.
The extra weird bit is that if i simply copy the source into my project, and include it from those folders it works fine. like so:
.
└── src
├── app
│ └── session
│ ├── session.compontent.html
│ ├── session.component.ts
│ ├── session.service.ts
│ ├── ng2-idle
│ │ └── (contents of src )
│ └── ng2-idle-keepalive
│ └── (contents of src )
├── app.component.html
├── app.component.ts
├── main.ts
└── app.module.ts
session.service.ts:
import { Idle, SimpleExpiry, DEFAULT_INTERRUPTSOURCES } from './ng2-idle/core';
import { Keepalive } from './ng2-idle-keepalive/core';
app.module.ts:
import { IDLE_PROVIDERS } from './session/ng2-idle/core';
import { KEEPALIVE_PROVIDERS } from './session/ng2-idle-keepalive/core';
import { SessionComponent } from './session/session.component'
@NgModule({
imports: [
// Modules
HttpModule
],
declarations: [ SessionComponent'],
providers: [
Title,
HttpModule,
KEEPALIVE_PROVIDERS,
IDLE_PROVIDERS,
],
bootstrap: [
// The main app component
AppComponent
]
Note: I did have to update keepalive.ts line 23 to public onPingResponse: EventEmitter<Response> = new EventEmitter<Response>();
from ng2-idle.
@stephengeorgewest I have a hunch that the issue you are seeing is related to different versions of Angular. The last released version of ng2-idle (1.0.0-alpha.15) uses angular-2.0.0-rc.5, where as you're trying to use Angular 2 rc6.
You can try using my distribution branches of ng2-idle and ng2-idle-keepalive that use rc6. You'll need something like the following in your package.json file:
"ng2-idle": "smorks/ng2-idle#v1.0.0-alpha.16-dist",
"ng2-idle-keepalive": "smorks/ng2-idle-keepalive#v1.0.0-alpha.9-dist"
Those specific versions are for rc6.
Edit: looks like ng-idle 1.0.0-alpha.16 was just released, supporting angular-2.0.0. Try updating your angular version & ng-idle/ng-idle-keepalive, and try again.
from ng2-idle.
Yeah, that seems to work, but (un?)fortunately we updated to 2.0.0 over the weekend.
error TS2345: Argument of type 'Request' is not assignable to parameter of type 'string | Request'.
Type 'Request' is not assignable to type 'Request'.
Types have separate declarations of a private property 'contentType'.
I don't see how that should even be an error. RC6 Request and 2.0.0 Request are exactly the same.
from ng2-idle.
Related Issues (20)
- Support for Angular 12+? HOT 2
- @ng-idle/[email protected] requires @ng-idle/core^11.0.0 HOT 1
- idleTimeoutWarning lags wall-clock when tab is in background) HOT 8
- Question: Does ng-idle still work even after user closed tab/closes browser? HOT 2
- remove mousemove etc events from Ng-Idle
- js setInterval continuing interrupting idletime HOT 2
- INTERRUPTS Changing HOT 2
- Update to Angular 13's new package format and compile with partial-ivy HOT 5
- idle stop not stopping idle watch. HOT 1
- Implement a privacy preserving mode functionality avoiding usage of the persistent browser localStorage
- Package version in npm registry HOT 2
- Release version 12 HOT 9
- ng2-idle pauses when the tab is in the background HOT 3
- Add support for Angular 16 HOT 5
- ng2-idle move on multiple tabs screen stuck
- Re-set the idle period setting HOT 3
- Configure Timeout to not check for idle, just countdown HOT 6
- Add support for Angular 17 HOT 11
- idleExpiry compare UTC and local time
- Multiple tabs - Signing out on one tab causes a timeout on another tab
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
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.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from ng2-idle.