Closed AnthonyQrea closed 6 years ago
i think it's related to the pipeable-operators
https://github.com/ReactiveX/rxjs/blob/master/doc/pipeable-operators.md
you should stop using this kind of import:
import 'rxjs/add/operator/map';
to allow tree shaking basically use pipe
. For your effects just try something like that:
import { ..., ofType } from '@ngrx/effects';
import { debounceTime, map, ... } from 'rxjs/operators';
...
this.actions.pipe(
ofType(ActionTypes.SIGN_IN),
debounceTime(500),
map((action: SignInAction) => action.payload),
...
comment:
import * as AllAuthActions from './auth.actions';
then you avoid to declare this huge list and you have autocomplete to access your actions
AllAuthActions.AuthenticatedErrorAction
...
hope this help
I don't think this is an issue with ngrx itself. Please provide a reproduction of this issue with stackblitz or a repo.
I experienced the same issue when compiling a project with AOT:
core.js:1598 ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'pipe' of undefined TypeError: Cannot read property 'pipe' of undefined at new FileEffects (file.effects.ts:42) at _createClass (core.js:9260) at _createProviderInstance$1 (core.js:9234) at initNgModule (core.js:9170) at new NgModuleRef_ (core.js:9899) at createNgModuleRef (core.js:9888) at Object.debugCreateNgModuleRef [as createNgModuleRef] (core.js:11719) at NgModuleFactory_.push.../../node_modules/@angular/core/fesm5/core.js.NgModuleFactory_.create (core.js:12421) at MapSubscriber.project (router.js:3287) at MapSubscriber.push.../../node_modules/rxjs/_esm5/internal/operators/map.js.MapSubscriber._next (map.js:75) at new FileEffects (file.effects.ts:42) at _createClass (core.js:9260) at _createProviderInstance$1 (core.js:9234) at initNgModule (core.js:9170) at new NgModuleRef_ (core.js:9899) at createNgModuleRef (core.js:9888) at Object.debugCreateNgModuleRef [as createNgModuleRef] (core.js:11719) at NgModuleFactory_.push.../../node_modules/@angular/core/fesm5/core.js.NgModuleFactory_.create (core.js:12421) at MapSubscriber.project (router.js:3287) at MapSubscriber.push.../../node_modules/rxjs/_esm5/internal/operators/map.js.MapSubscriber._next (map.js:75) at resolvePromise (zone.js:814) at resolvePromise (zone.js:771) at zone.js:873 at ZoneDelegate.push.../../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:421) at Object.onInvokeTask (core.js:4053) at ZoneDelegate.push.../../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:420) at Zone.push.../../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:188) at drainMicroTaskQueue (zone.js:595)
The problem has nothing to do with pipeable operators, but after some digging I found this issue and I can confirm that it has to to with barrel imports. If I reference my effects class from a barrel import...
EffectsModule.forFeature([fromStore.File.FileEffects])
...it will compile, but break with the above mentioned error in the browser. If I directly import the effects class and reference it that way...
EffectsModule.forFeature([FileEffects])
...everything works as expected.
It should be mentioned that this issue occurs only when compiling with AOT option and the module in question is a lazy-loaded module.
I got thinking, in the linked issue, I could see that the barrel re-exports sub-barrels, just like in my case, and creates intermediary module namespaces, like fromStore.File.FileEffects
. So I tried what would happen, if I skip the inner namespace. So instead of:
...
import * as fromStore from './store';
@NgModule({
imports: [
CommonModule,
...
StoreModule.forFeature(fromStore.featureName, fromStore.reducers, { metaReducers: fromStore.metaReducers }),
EffectsModule.forFeature([fromStore.File.FileEffects]),
SomeRoutingModule
],...
})
export class SomeModule {}
... I would separately import the previously namespaced File
barrel like this:
import * as fromStore from './store';
import * as fromFile from './store/file';
@NgModule({
imports: [
CommonModule,
...
StoreModule.forFeature(fromStore.featureName, fromStore.reducers, { metaReducers: fromStore.metaReducers }),
EffectsModule.forFeature([fromFile.FileEffects]),
SomeRoutingModule
],...
})
export class SomeModule {}
This actually works with AOT. So it looks like it's only a problem, for deeper nested re-exports. Maybe it helps to show my store barrel:
import { ActionReducerMap, MetaReducer } from '@ngrx/store';
import { environment } from '../../../environments/environment';
import * as fromFile from './file';
import { State } from './state';
export * from './state'
export const reducers: ActionReducerMap<State> = {
files: fromFile.reducer,
};
export const metaReducers: MetaReducer<State>[] = !environment.production ? [] : [];
export { fromFile as File };
Maybe the re-export is done incorrectly?
I am facing the same error:
Uncaught TypeError: Cannot read property 'ofType' of undefined at new l (main.e7f84b40dc7ee41a9acb.js:1) at main.e7f84b40dc7ee41a9acb.js:1 at Ii (main.e7f84b40dc7ee41a9acb.js:1) at main.e7f84b40dc7ee41a9acb.js:1 at new l (main.e7f84b40dc7ee41a9acb.js:1) at Object.eu [as createNgModuleRef] (main.e7f84b40dc7ee41a9acb.js:1) at n.create (main.e7f84b40dc7ee41a9acb.js:1) at main.e7f84b40dc7ee41a9acb.js:1 at t.invoke (polyfills.7da7c717970c702965aa.js:1) at Object.onInvoke (main.e7f84b40dc7ee41a9acb.js:1)
does anyone has any clue?
alexanderwende solution worked for me
I'm submitting a...
What is the current behavior?
Hello ,sorry for my bad English When I compile my application in -AOT, the Angular console does not send me an error (compilation is good). But in my browser, I have this error "auth.effects.ts: 81 Uncaught TypeError: Can not read property 'ofType' of undefined"
Expected behavior:
I would like the error to disappear and the application will launch
Minimal reproduction of the problem with instructions:
I Have : My Auth.effect.ts :
my auth.action.ts :
my app.module.ts :
Version of affected browser(s),operating system(s), npm, node and ngrx:
Browser: latest Google Chrome and Firefox (Mac) "typescript": "2.4.2" @angular/cli: "1.6.7", "@angular/compiler-cli": "^5.2.9", "@angular/language-service": "^5.2.9", "ngrx-store-freeze": "^0.2.1", "rxjs": "^5.5.8", "ngrx-store-localstorage": "^0.2.4", "ngrx-store-logger": "^0.2.1", "ngx-device-detector": "^1.2.2", "ngx-facebook": "^2.4.0", "npm": "^5.8.0", "@ngrx/core": "^1.2.0", "@ngrx/effects": "^5.2.0", "@ngrx/router-store": "^5.2.0", "@ngrx/store": "^5.2.0", "@ngrx/store-devtools": "^5.2.0",
Other information:
if you need more information you can contact me with : anthony@qrea.io Thanks