Platform: @Effect generates bad import when used in a library

[clwandling]

Minimal reproduction of the bug/regression with instructions:

https://github.com/clwandling/effect-app-module.git

When I build the library contained inside this project (ng build effect-lib) the Effect class that in the ditribution contains a bad import. I believe that the import is off by one "../".

dist/effect-lib/lib/store/user.effects,ts.d.ts

import { Actions } from '@ngrx/effects';
import { User } from '../models/user';
import { HttpClient } from '@angular/common/http';
export declare class UserEffects {
    private actions$;
    private http;
    authSignin: import("../../../../../node_modules/rxjs/internal/Observable").Observable<{
        type: string;
        payload: User;
    }>;
    constructor(actions$: Actions, http: HttpClient);
}

Error is TS2307: Cannot find module '../../../../../node_modules/rxjs/internal/Observable'

Expected behavior:

The correct import would be

authSignin: import("../../../../../node_modules/rxjs/internal/Observable").Observable<{

Although I am not sure why the code is referencing that internal Observable rather than a regular import

import {Observable, of} from 'rxjs';

This causes problems when I publish (npm publish) and then install the module in another app.

Versions of NgRx, Angular, Node, affected browser(s) and operating system(s):

angular 6.1.0
ngrx/effects: 6.1.0
ngrx/store: 6.1.0
rxjs: 6.2.0

Other information:

I would be willing to submit a PR to fix this issue

I would be i don't even know where to start... :-|

[ ] Yes (Assistance is provided if you need help submitting a pull request)
[X] No

[timdeschryver]

I'm not sure if this is a NgRx problem.
As a work around you can import the Observable from RxJS in the imports of your effect.

import { Observable } from 'rxjs';

[clwandling]

Doh... Didn't think of trying that. Thanks.

It may not be a ngrx problem but I was not sure who I should report this to.

[timdeschryver]

I'll leave this open for now, maybe it is an NgRx bug and someone who's smarter then me knows what's wrong 😅 .

[MatsumotoKou]

For instance, It can be fixed by using type annotation manually.

@Effect()
authSignin: Observable<any> = this.actions$.pipe(

[christianlundberg]

This is an ng-packagr bug, you can get around it by importing the type instead of letting it be implied by the return statement.

[timdeschryver]

I'm closing this issue because I believe this is due to ng-packagr (and might already be resolved by now), plus we've listed some work-arounds.

Also, createEffect solves this problem.

[sachin27sharma]

Hi.
Am getting below error when ngrx effect is getting evaluated -
Using NgRx 9.0.0-rc0 with Angular 9.
When debugging the userInfo.effect, am seeing below error, due to Actions and another service NOT getting injected.
"Uncaught TypeError: Cannot read property 'pipe' of undefined"

Below is the setup

Angular Library Project -
effects/export -
export {UserInfoEffects} from './userInfo.effect';

public_api.ts -

export * from './effects/export';

In another Angular project Application Module
StoreModule.forRoot(indexReducer),
EffectsModule.forRoot([UserInfoEffects]),

Can anyone help me what am i missing here?

[timdeschryver]

@sachin27sharma this was fixed in one of the later rc release.
Could you try and upgrade to NgRx 9?