How to get library to work with Angular 2 Webpack Starter

[mbcooper]

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

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

[grbsk]

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.

[spicywhitefish]

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.

[stephengeorgewest]

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

[smorks]

@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.

[stephengeorgewest]

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.

[grbsk]

ng2-idle@1.0.0-alpha.16 and ng2-idle-keepalive@1.0.0-alpha.9 have been upgraded to angular@2.0.0

[stephengeorgewest]

Woot. That seems to work. I assume this issue can be closed. Probably #10 as well.