[AAE-7145] upgrade to Ngrx 10 (#2479)

* upgrade to ngrx 10

* fix auth proxy

* migrate effects to newer syntax

app/proxy.conf.js

@@ -10,6 +10,17 @@ module.exports = {
             "^/alfresco/alfresco": ""
         },
         "changeOrigin": true,
-        'logLevel': 'debug'
+        'logLevel': 'debug',
+        onProxyReq: function(request) {
+          if(request["method"] !== "GET")
+          request.setHeader("origin", APP_CONFIG_ECM_HOST);
+        },
+        // workaround for REPO-2260
+        onProxyRes: function (proxyRes) {
+          const header = proxyRes.headers['www-authenticate'];
+          if (header && header.startsWith('Basic')) {
+              proxyRes.headers['www-authenticate'] = 'x' + header;
+          }
+      }
     }
 };

app/src/app/store/effects/app.effects.ts

@@ -23,7 +23,7 @@
  * along with Alfresco. If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { Effect, Actions, ofType } from '@ngrx/effects';
+import { Actions, ofType, createEffect } from '@ngrx/effects';
 import { Injectable } from '@angular/core';
 import { map } from 'rxjs/operators';
 import { AppActionTypes, LogoutAction, ReloadDocumentListAction, ResetSelectionAction } from '@alfresco/aca-shared/store';
@@ -35,31 +35,40 @@ import { AppHookService } from '@alfresco/aca-shared';
 export class AppEffects {
   constructor(private actions$: Actions, private auth: AuthenticationService, private router: Router, private appHookService: AppHookService) {}
 
-  @Effect({ dispatch: false })
-  reload = this.actions$.pipe(
-    ofType<ReloadDocumentListAction>(AppActionTypes.ReloadDocumentList),
-    map((action) => {
-      this.appHookService.reload.next(action);
-    })
+  reload = createEffect(
+    () =>
+      this.actions$.pipe(
+        ofType<ReloadDocumentListAction>(AppActionTypes.ReloadDocumentList),
+        map((action) => {
+          this.appHookService.reload.next(action);
+        })
+      ),
+    { dispatch: false }
   );
 
-  @Effect({ dispatch: false })
-  resetSelection = this.actions$.pipe(
-    ofType<ResetSelectionAction>(AppActionTypes.ResetSelection),
-    map((action) => {
-      this.appHookService.reset.next(action);
-    })
+  resetSelection = createEffect(
+    () =>
+      this.actions$.pipe(
+        ofType<ResetSelectionAction>(AppActionTypes.ResetSelection),
+        map((action) => {
+          this.appHookService.reset.next(action);
+        })
+      ),
+    { dispatch: false }
   );
 
-  @Effect({ dispatch: false })
-  logout$ = this.actions$.pipe(
-    ofType<LogoutAction>(AppActionTypes.Logout),
-    map(() => {
-      this.auth.logout().subscribe(
-        () => this.redirectToLogin(),
-        () => this.redirectToLogin()
-      );
-    })
+  logout$ = createEffect(
+    () =>
+      this.actions$.pipe(
+        ofType<LogoutAction>(AppActionTypes.Logout),
+        map(() => {
+          this.auth.logout().subscribe(
+            () => this.redirectToLogin(),
+            () => this.redirectToLogin()
+          );
+        })
+      ),
+    { dispatch: false }
   );
 
   private redirectToLogin(): Promise<boolean> {

app/src/app/store/effects/contextmenu.effects.ts

@@ -25,7 +25,7 @@
 
 import { ContextMenuActionTypes, ContextMenu } from '@alfresco/aca-shared/store';
 import { Injectable } from '@angular/core';
-import { Actions, Effect, ofType } from '@ngrx/effects';
+import { Actions, ofType, createEffect } from '@ngrx/effects';
 import { map } from 'rxjs/operators';
 import { ContextMenuOverlayRef } from '../../components/context-menu/context-menu-overlay';
 import { ContextMenuService } from '../../components/context-menu/context-menu.service';
@@ -36,20 +36,23 @@ export class ContextMenuEffects {
 
   constructor(private contextMenuService: ContextMenuService, private actions$: Actions) {}
 
-  @Effect({ dispatch: false })
-  contextMenu$ = this.actions$.pipe(
-    ofType<ContextMenu>(ContextMenuActionTypes.ContextMenu),
-    map((action) => {
-      if (this.overlayRef) {
-        this.overlayRef.close();
-      }
+  contextMenu$ = createEffect(
+    () =>
+      this.actions$.pipe(
+        ofType<ContextMenu>(ContextMenuActionTypes.ContextMenu),
+        map((action) => {
+          if (this.overlayRef) {
+            this.overlayRef.close();
+          }
 
-      this.overlayRef = this.contextMenuService.open({
-        source: action.event,
-        hasBackdrop: false,
-        backdropClass: 'cdk-overlay-transparent-backdrop',
-        panelClass: 'cdk-overlay-pane'
-      });
-    })
+          this.overlayRef = this.contextMenuService.open({
+            source: action.event,
+            hasBackdrop: false,
+            backdropClass: 'cdk-overlay-transparent-backdrop',
+            panelClass: 'cdk-overlay-pane'
+          });
+        })
+      ),
+    { dispatch: false }
   );
 }

app/src/app/store/effects/download.effects.ts

@@ -28,7 +28,7 @@ import { DownloadZipDialogComponent } from '@alfresco/adf-core';
 import { MinimalNodeEntity, Version } from '@alfresco/js-api';
 import { Injectable } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
-import { Actions, Effect, ofType } from '@ngrx/effects';
+import { Actions, ofType, createEffect } from '@ngrx/effects';
 import { Store } from '@ngrx/store';
 import { map, take } from 'rxjs/operators';
 import { ContentApiService } from '@alfresco/aca-shared';
@@ -44,32 +44,35 @@ export class DownloadEffects {
     private contentUrlService: ContentUrlService
   ) {}
 
-  @Effect({ dispatch: false })
-  downloadNode$ = this.actions$.pipe(
-    ofType<DownloadNodesAction>(NodeActionTypes.Download),
-    map((action) => {
-      if (action.payload && action.payload.length > 0) {
-        this.downloadNodes(action.payload);
-      } else {
-        this.store
-          .select(getAppSelection)
-          .pipe(take(1))
-          .subscribe((selection) => {
-            if (selection && !selection.isEmpty) {
-              this.store
-                .select(getCurrentVersion)
-                .pipe(take(1))
-                .subscribe((version) => {
-                  if (version) {
-                    this.downloadFileVersion(selection.nodes[0].entry, version.entry);
-                  } else {
-                    this.downloadNodes(selection.nodes);
-                  }
-                });
-            }
-          });
-      }
-    })
+  downloadNode$ = createEffect(
+    () =>
+      this.actions$.pipe(
+        ofType<DownloadNodesAction>(NodeActionTypes.Download),
+        map((action) => {
+          if (action.payload && action.payload.length > 0) {
+            this.downloadNodes(action.payload);
+          } else {
+            this.store
+              .select(getAppSelection)
+              .pipe(take(1))
+              .subscribe((selection) => {
+                if (selection && !selection.isEmpty) {
+                  this.store
+                    .select(getCurrentVersion)
+                    .pipe(take(1))
+                    .subscribe((version) => {
+                      if (version) {
+                        this.downloadFileVersion(selection.nodes[0].entry, version.entry);
+                      } else {
+                        this.downloadNodes(selection.nodes);
+                      }
+                    });
+                }
+              });
+          }
+        })
+      ),
+    { dispatch: false }
   );
 
   private downloadNodes(toDownload: Array<MinimalNodeEntity>) {

app/src/app/store/effects/favorite.effects.ts

@@ -23,7 +23,7 @@
  * along with Alfresco. If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { Effect, Actions, ofType } from '@ngrx/effects';
+import { Actions, ofType, createEffect } from '@ngrx/effects';
 import { Injectable } from '@angular/core';
 import { map, take } from 'rxjs/operators';
 import { AppStore, NodeActionTypes, AddFavoriteAction, RemoveFavoriteAction, getAppSelection } from '@alfresco/aca-shared/store';
@@ -34,41 +34,47 @@ import { ContentManagementService } from '../../services/content-management.serv
 export class FavoriteEffects {
   constructor(private store: Store<AppStore>, private actions$: Actions, private content: ContentManagementService) {}
 
-  @Effect({ dispatch: false })
-  addFavorite$ = this.actions$.pipe(
-    ofType<AddFavoriteAction>(NodeActionTypes.AddFavorite),
-    map((action) => {
-      if (action.payload && action.payload.length > 0) {
-        this.content.addFavorite(action.payload);
-      } else {
-        this.store
-          .select(getAppSelection)
-          .pipe(take(1))
-          .subscribe((selection) => {
-            if (selection && !selection.isEmpty) {
-              this.content.addFavorite(selection.nodes);
-            }
-          });
-      }
-    })
+  addFavorite$ = createEffect(
+    () =>
+      this.actions$.pipe(
+        ofType<AddFavoriteAction>(NodeActionTypes.AddFavorite),
+        map((action) => {
+          if (action.payload && action.payload.length > 0) {
+            this.content.addFavorite(action.payload);
+          } else {
+            this.store
+              .select(getAppSelection)
+              .pipe(take(1))
+              .subscribe((selection) => {
+                if (selection && !selection.isEmpty) {
+                  this.content.addFavorite(selection.nodes);
+                }
+              });
+          }
+        })
+      ),
+    { dispatch: false }
   );
 
-  @Effect({ dispatch: false })
-  removeFavorite$ = this.actions$.pipe(
-    ofType<RemoveFavoriteAction>(NodeActionTypes.RemoveFavorite),
-    map((action) => {
-      if (action.payload && action.payload.length > 0) {
-        this.content.removeFavorite(action.payload);
-      } else {
-        this.store
-          .select(getAppSelection)
-          .pipe(take(1))
-          .subscribe((selection) => {
-            if (selection && !selection.isEmpty) {
-              this.content.removeFavorite(selection.nodes);
-            }
-          });
-      }
-    })
+  removeFavorite$ = createEffect(
+    () =>
+      this.actions$.pipe(
+        ofType<RemoveFavoriteAction>(NodeActionTypes.RemoveFavorite),
+        map((action) => {
+          if (action.payload && action.payload.length > 0) {
+            this.content.removeFavorite(action.payload);
+          } else {
+            this.store
+              .select(getAppSelection)
+              .pipe(take(1))
+              .subscribe((selection) => {
+                if (selection && !selection.isEmpty) {
+                  this.content.removeFavorite(selection.nodes);
+                }
+              });
+          }
+        })
+      ),
+    { dispatch: false }
   );
 }

app/src/app/store/effects/library.effects.ts

@@ -36,7 +36,7 @@ import {
   getAppSelection
 } from '@alfresco/aca-shared/store';
 import { Injectable } from '@angular/core';
-import { Actions, Effect, ofType } from '@ngrx/effects';
+import { Actions, ofType, createEffect } from '@ngrx/effects';
 import { Store } from '@ngrx/store';
 import { map, mergeMap, take } from 'rxjs/operators';
 import { ContentApiService } from '@alfresco/aca-shared';
@@ -51,94 +51,109 @@ export class LibraryEffects {
     private contentApi: ContentApiService
   ) {}
 
-  @Effect({ dispatch: false })
-  deleteLibrary$ = this.actions$.pipe(
-    ofType<DeleteLibraryAction>(LibraryActionTypes.Delete),
-    map((action) => {
-      if (action.payload) {
-        this.content.deleteLibrary(action.payload);
-      } else {
-        this.store
-          .select(getAppSelection)
-          .pipe(take(1))
-          .subscribe((selection) => {
-            if (selection && selection.library) {
-              this.content.deleteLibrary(selection.library.entry.id);
-            }
-          });
-      }
-    })
-  );
-
-  @Effect({ dispatch: false })
-  leaveLibrary$ = this.actions$.pipe(
-    ofType<LeaveLibraryAction>(LibraryActionTypes.Leave),
-    map((action) => {
-      if (action.payload) {
-        this.content.leaveLibrary(action.payload);
-      } else {
-        this.store
-          .select(getAppSelection)
-          .pipe(take(1))
-          .subscribe((selection) => {
-            if (selection && selection.library) {
-              this.content.leaveLibrary(selection.library.entry.id);
-            }
-          });
-      }
-    })
-  );
-
-  @Effect()
-  createLibrary$ = this.actions$.pipe(
-    ofType<CreateLibraryAction>(LibraryActionTypes.Create),
-    mergeMap(() => this.content.createLibrary()),
-    map((libraryId) => new NavigateLibraryAction(libraryId))
-  );
-
-  @Effect({ dispatch: false })
-  navigateLibrary$ = this.actions$.pipe(
-    ofType<NavigateLibraryAction>(LibraryActionTypes.Navigate),
-    map((action) => {
-      const libraryId = action.payload;
-      if (libraryId) {
-        this.contentApi
-          .getNode(libraryId, { relativePath: '/documentLibrary' })
-          .pipe(map((node) => node.entry.id))
-          .subscribe(
-            (id) => {
-              const route = action.route ? action.route : 'libraries';
-              this.store.dispatch(new NavigateRouteAction([route, id]));
-            },
-            () => {
-              this.store.dispatch(new SnackbarErrorAction('APP.MESSAGES.ERRORS.MISSING_CONTENT'));
-            }
-          );
-      }
-    })
-  );
-
-  @Effect({ dispatch: false })
-  updateLibrary$ = this.actions$.pipe(
-    ofType<UpdateLibraryAction>(LibraryActionTypes.Update),
-    map((action) => {
-      this.store
-        .select(getAppSelection)
-        .pipe(take(1))
-        .subscribe((selection) => {
-          if (selection && selection.library) {
-            const { id } = selection.library.entry;
-            const { title, description, visibility } = action.payload;
-
-            const siteBody = {
-              title,
-              description,
-              visibility
-            };
-
-            this.content.updateLibrary(id, siteBody);
+  deleteLibrary$ = createEffect(
+    () =>
+      this.actions$.pipe(
+        ofType<DeleteLibraryAction>(LibraryActionTypes.Delete),
+        map((action) => {
+          if (action.payload) {
+            this.content.deleteLibrary(action.payload);
+          } else {
+            this.store
+              .select(getAppSelection)
+              .pipe(take(1))
+              .subscribe((selection) => {
+                if (selection && selection.library) {
+                  this.content.deleteLibrary(selection.library.entry.id);
+                }
+              });
           }
-        });
-    })
+        })
+      ),
+    { dispatch: false }
+  );
+
+  leaveLibrary$ = createEffect(
+    () =>
+      this.actions$.pipe(
+        ofType<LeaveLibraryAction>(LibraryActionTypes.Leave),
+        map((action) => {
+          if (action.payload) {
+            this.content.leaveLibrary(action.payload);
+          } else {
+            this.store
+              .select(getAppSelection)
+              .pipe(take(1))
+              .subscribe((selection) => {
+                if (selection && selection.library) {
+                  this.content.leaveLibrary(selection.library.entry.id);
+                }
+              });
+          }
+        })
+      ),
+    { dispatch: false }
+  );
+
+  createLibrary$ = createEffect(
+    () =>
+      this.actions$.pipe(
+        ofType<CreateLibraryAction>(LibraryActionTypes.Create),
+        mergeMap(() => this.content.createLibrary()),
+        map((libraryId) => new NavigateLibraryAction(libraryId))
+      ),
+    { dispatch: true }
+  );
+
+  navigateLibrary$ = createEffect(
+    () =>
+      this.actions$.pipe(
+        ofType<NavigateLibraryAction>(LibraryActionTypes.Navigate),
+        map((action) => {
+          const libraryId = action.payload;
+          if (libraryId) {
+            this.contentApi
+              .getNode(libraryId, { relativePath: '/documentLibrary' })
+              .pipe(map((node) => node.entry.id))
+              .subscribe(
+                (id) => {
+                  const route = action.route ? action.route : 'libraries';
+                  this.store.dispatch(new NavigateRouteAction([route, id]));
+                },
+                () => {
+                  this.store.dispatch(new SnackbarErrorAction('APP.MESSAGES.ERRORS.MISSING_CONTENT'));
+                }
+              );
+          }
+        })
+      ),
+    { dispatch: false }
+  );
+
+  updateLibrary$ = createEffect(
+    () =>
+      this.actions$.pipe(
+        ofType<UpdateLibraryAction>(LibraryActionTypes.Update),
+        map((action) => {
+          this.store
+            .select(getAppSelection)
+            .pipe(take(1))
+            .subscribe((selection) => {
+              if (selection && selection.library) {
+                const { id } = selection.library.entry;
+                const { title, description, visibility } = action.payload;
+
+                const siteBody = {
+                  title,
+                  description,
+                  visibility
+                };
+
+                this.content.updateLibrary(id, siteBody);
+              }
+            });
+        })
+      ),
+    { dispatch: false }
   );
 }

app/src/app/store/effects/node.effects.ts

@@ -23,7 +23,7 @@
  * along with Alfresco. If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { Effect, Actions, ofType } from '@ngrx/effects';
+import { Actions, ofType, createEffect } from '@ngrx/effects';
 import { Injectable } from '@angular/core';
 import { map, take } from 'rxjs/operators';
 import { Store } from '@ngrx/store';
@@ -62,303 +62,351 @@ export class NodeEffects {
     private viewUtils: ViewUtilService
   ) {}
 
-  @Effect({ dispatch: false })
-  shareNode$ = this.actions$.pipe(
-    ofType<ShareNodeAction>(NodeActionTypes.Share),
-    map((action) => {
-      if (action.payload) {
-        this.contentService.shareNode(action.payload);
-      } else {
-        this.store
-          .select(getAppSelection)
-          .pipe(take(1))
-          .subscribe((selection) => {
-            if (selection && selection.file) {
-              this.contentService.shareNode(selection.file);
-            }
-          });
-      }
-    })
+  shareNode$ = createEffect(
+    () =>
+      this.actions$.pipe(
+        ofType<ShareNodeAction>(NodeActionTypes.Share),
+        map((action) => {
+          if (action.payload) {
+            this.contentService.shareNode(action.payload);
+          } else {
+            this.store
+              .select(getAppSelection)
+              .pipe(take(1))
+              .subscribe((selection) => {
+                if (selection && selection.file) {
+                  this.contentService.shareNode(selection.file);
+                }
+              });
+          }
+        })
+      ),
+    { dispatch: false }
   );
 
-  @Effect({ dispatch: false })
-  unshareNodes$ = this.actions$.pipe(
-    ofType<UnshareNodesAction>(NodeActionTypes.Unshare),
-    map((action) => {
-      if (action && action.payload && action.payload.length > 0) {
-        this.contentService.unshareNodes(action.payload);
-      } else {
-        this.store
-          .select(getAppSelection)
-          .pipe(take(1))
-          .subscribe((selection) => {
-            if (selection && !selection.isEmpty) {
-              this.contentService.unshareNodes(selection.nodes);
-            }
-          });
-      }
-    })
+  unshareNodes$ = createEffect(
+    () =>
+      this.actions$.pipe(
+        ofType<UnshareNodesAction>(NodeActionTypes.Unshare),
+        map((action) => {
+          if (action && action.payload && action.payload.length > 0) {
+            this.contentService.unshareNodes(action.payload);
+          } else {
+            this.store
+              .select(getAppSelection)
+              .pipe(take(1))
+              .subscribe((selection) => {
+                if (selection && !selection.isEmpty) {
+                  this.contentService.unshareNodes(selection.nodes);
+                }
+              });
+          }
+        })
+      ),
+    { dispatch: false }
   );
 
-  @Effect({ dispatch: false })
-  purgeDeletedNodes$ = this.actions$.pipe(
-    ofType<PurgeDeletedNodesAction>(NodeActionTypes.PurgeDeleted),
-    map((action) => {
-      if (action && action.payload && action.payload.length > 0) {
-        this.contentService.purgeDeletedNodes(action.payload);
-      } else {
-        this.store
-          .select(getAppSelection)
-          .pipe(take(1))
-          .subscribe((selection) => {
-            if (selection && selection.count > 0) {
-              this.contentService.purgeDeletedNodes(selection.nodes);
-            }
-          });
-      }
-    })
+  purgeDeletedNodes$ = createEffect(
+    () =>
+      this.actions$.pipe(
+        ofType<PurgeDeletedNodesAction>(NodeActionTypes.PurgeDeleted),
+        map((action) => {
+          if (action && action.payload && action.payload.length > 0) {
+            this.contentService.purgeDeletedNodes(action.payload);
+          } else {
+            this.store
+              .select(getAppSelection)
+              .pipe(take(1))
+              .subscribe((selection) => {
+                if (selection && selection.count > 0) {
+                  this.contentService.purgeDeletedNodes(selection.nodes);
+                }
+              });
+          }
+        })
+      ),
+    { dispatch: false }
   );
 
-  @Effect({ dispatch: false })
-  restoreDeletedNodes$ = this.actions$.pipe(
-    ofType<RestoreDeletedNodesAction>(NodeActionTypes.RestoreDeleted),
-    map((action) => {
-      if (action && action.payload && action.payload.length > 0) {
-        this.contentService.restoreDeletedNodes(action.payload);
-      } else {
-        this.store
-          .select(getAppSelection)
-          .pipe(take(1))
-          .subscribe((selection) => {
-            if (selection && selection.count > 0) {
-              this.contentService.restoreDeletedNodes(selection.nodes);
-            }
-          });
-      }
-    })
+  restoreDeletedNodes$ = createEffect(
+    () =>
+      this.actions$.pipe(
+        ofType<RestoreDeletedNodesAction>(NodeActionTypes.RestoreDeleted),
+        map((action) => {
+          if (action && action.payload && action.payload.length > 0) {
+            this.contentService.restoreDeletedNodes(action.payload);
+          } else {
+            this.store
+              .select(getAppSelection)
+              .pipe(take(1))
+              .subscribe((selection) => {
+                if (selection && selection.count > 0) {
+                  this.contentService.restoreDeletedNodes(selection.nodes);
+                }
+              });
+          }
+        })
+      ),
+    { dispatch: false }
   );
 
-  @Effect({ dispatch: false })
-  deleteNodes$ = this.actions$.pipe(
-    ofType<DeleteNodesAction>(NodeActionTypes.Delete),
-    map((action) => {
-      if (action && action.payload && action.payload.length > 0) {
-        this.contentService.deleteNodes(action.payload);
-      } else {
-        this.store
-          .select(getAppSelection)
-          .pipe(take(1))
-          .subscribe((selection) => {
-            if (selection && selection.count > 0) {
-              this.contentService.deleteNodes(selection.nodes);
-            }
-          });
-      }
-    })
+  deleteNodes$ = createEffect(
+    () =>
+      this.actions$.pipe(
+        ofType<DeleteNodesAction>(NodeActionTypes.Delete),
+        map((action) => {
+          if (action && action.payload && action.payload.length > 0) {
+            this.contentService.deleteNodes(action.payload);
+          } else {
+            this.store
+              .select(getAppSelection)
+              .pipe(take(1))
+              .subscribe((selection) => {
+                if (selection && selection.count > 0) {
+                  this.contentService.deleteNodes(selection.nodes);
+                }
+              });
+          }
+        })
+      ),
+    { dispatch: false }
   );
 
-  @Effect({ dispatch: false })
-  undoDeleteNodes$ = this.actions$.pipe(
-    ofType<UndoDeleteNodesAction>(NodeActionTypes.UndoDelete),
-    map((action) => {
-      if (action.payload.length > 0) {
-        this.contentService.undoDeleteNodes(action.payload);
-      }
-    })
+  undoDeleteNodes$ = createEffect(
+    () =>
+      this.actions$.pipe(
+        ofType<UndoDeleteNodesAction>(NodeActionTypes.UndoDelete),
+        map((action) => {
+          if (action.payload.length > 0) {
+            this.contentService.undoDeleteNodes(action.payload);
+          }
+        })
+      ),
+    { dispatch: false }
   );
 
-  @Effect({ dispatch: false })
-  createFolder$ = this.actions$.pipe(
-    ofType<CreateFolderAction>(NodeActionTypes.CreateFolder),
-    map((action) => {
-      if (action.payload) {
-        this.contentService.createFolder(action.payload);
-      } else {
-        this.store
-          .select(getCurrentFolder)
-          .pipe(take(1))
-          .subscribe((node) => {
-            if (node && node.id) {
-              this.contentService.createFolder(node.id);
-            }
-          });
-      }
-    })
+  createFolder$ = createEffect(
+    () =>
+      this.actions$.pipe(
+        ofType<CreateFolderAction>(NodeActionTypes.CreateFolder),
+        map((action) => {
+          if (action.payload) {
+            this.contentService.createFolder(action.payload);
+          } else {
+            this.store
+              .select(getCurrentFolder)
+              .pipe(take(1))
+              .subscribe((node) => {
+                if (node && node.id) {
+                  this.contentService.createFolder(node.id);
+                }
+              });
+          }
+        })
+      ),
+    { dispatch: false }
   );
 
-  @Effect({ dispatch: false })
-  editFolder$ = this.actions$.pipe(
-    ofType<EditFolderAction>(NodeActionTypes.EditFolder),
-    map((action) => {
-      if (action.payload) {
-        this.contentService.editFolder(action.payload);
-      } else {
-        this.store
-          .select(getAppSelection)
-          .pipe(take(1))
-          .subscribe((selection) => {
-            if (selection && selection.folder) {
-              this.contentService.editFolder(selection.folder);
-            }
-          });
-      }
-    })
+  editFolder$ = createEffect(
+    () =>
+      this.actions$.pipe(
+        ofType<EditFolderAction>(NodeActionTypes.EditFolder),
+        map((action) => {
+          if (action.payload) {
+            this.contentService.editFolder(action.payload);
+          } else {
+            this.store
+              .select(getAppSelection)
+              .pipe(take(1))
+              .subscribe((selection) => {
+                if (selection && selection.folder) {
+                  this.contentService.editFolder(selection.folder);
+                }
+              });
+          }
+        })
+      ),
+    { dispatch: false }
   );
 
-  @Effect({ dispatch: false })
-  copyNodes$ = this.actions$.pipe(
-    ofType<CopyNodesAction>(NodeActionTypes.Copy),
-    map((action) => {
-      if (action.payload && action.payload.length > 0) {
-        this.contentService.copyNodes(action.payload);
-      } else {
-        this.store
-          .select(getAppSelection)
-          .pipe(take(1))
-          .subscribe((selection) => {
-            if (selection && !selection.isEmpty) {
-              this.contentService.copyNodes(selection.nodes);
-            }
-          });
-      }
-    })
+  copyNodes$ = createEffect(
+    () =>
+      this.actions$.pipe(
+        ofType<CopyNodesAction>(NodeActionTypes.Copy),
+        map((action) => {
+          if (action.payload && action.payload.length > 0) {
+            this.contentService.copyNodes(action.payload);
+          } else {
+            this.store
+              .select(getAppSelection)
+              .pipe(take(1))
+              .subscribe((selection) => {
+                if (selection && !selection.isEmpty) {
+                  this.contentService.copyNodes(selection.nodes);
+                }
+              });
+          }
+        })
+      ),
+    { dispatch: false }
   );
 
-  @Effect({ dispatch: false })
-  moveNodes$ = this.actions$.pipe(
-    ofType<MoveNodesAction>(NodeActionTypes.Move),
-    map((action) => {
-      if (action.payload && action.payload.length > 0) {
-        this.contentService.moveNodes(action.payload);
-      } else {
-        this.store
-          .select(getAppSelection)
-          .pipe(take(1))
-          .subscribe((selection) => {
-            if (selection && !selection.isEmpty) {
-              this.contentService.moveNodes(selection.nodes);
-            }
-          });
-      }
-    })
+  moveNodes$ = createEffect(
+    () =>
+      this.actions$.pipe(
+        ofType<MoveNodesAction>(NodeActionTypes.Move),
+        map((action) => {
+          if (action.payload && action.payload.length > 0) {
+            this.contentService.moveNodes(action.payload);
+          } else {
+            this.store
+              .select(getAppSelection)
+              .pipe(take(1))
+              .subscribe((selection) => {
+                if (selection && !selection.isEmpty) {
+                  this.contentService.moveNodes(selection.nodes);
+                }
+              });
+          }
+        })
+      ),
+    { dispatch: false }
   );
 
-  @Effect({ dispatch: false })
-  managePermissions$ = this.actions$.pipe(
-    ofType<ManagePermissionsAction>(NodeActionTypes.ManagePermissions),
-    map((action) => {
-      if (action && action.payload) {
-        const route = 'personal-files/details';
-        this.store.dispatch(new NavigateRouteAction([route, action.payload.entry.id, 'permissions']));
-      } else {
-        this.store
-          .select(getAppSelection)
-          .pipe(take(1))
-          .subscribe((selection) => {
-            if (selection && !selection.isEmpty) {
-              const route = 'personal-files/details';
-              this.store.dispatch(new NavigateRouteAction([route, selection.first.entry.id, 'permissions']));
-            }
-          });
-      }
-    })
+  managePermissions$ = createEffect(
+    () =>
+      this.actions$.pipe(
+        ofType<ManagePermissionsAction>(NodeActionTypes.ManagePermissions),
+        map((action) => {
+          if (action && action.payload) {
+            const route = 'personal-files/details';
+            this.store.dispatch(new NavigateRouteAction([route, action.payload.entry.id, 'permissions']));
+          } else {
+            this.store
+              .select(getAppSelection)
+              .pipe(take(1))
+              .subscribe((selection) => {
+                if (selection && !selection.isEmpty) {
+                  const route = 'personal-files/details';
+                  this.store.dispatch(new NavigateRouteAction([route, selection.first.entry.id, 'permissions']));
+                }
+              });
+          }
+        })
+      ),
+    { dispatch: false }
   );
 
-  @Effect({ dispatch: false })
-  expandInfoDrawer$ = this.actions$.pipe(
-    ofType<ExpandInfoDrawerAction>(NodeActionTypes.ExpandInfoDrawer),
-    map((action) => {
-      if (action && action.payload) {
-        const route = 'personal-files/details';
-        this.store.dispatch(new NavigateRouteAction([route, action.payload.entry.id]));
-      } else {
-        this.store
-          .select(getAppSelection)
-          .pipe(take(1))
-          .subscribe((selection) => {
-            if (selection && !selection.isEmpty) {
-              const route = 'personal-files/details';
-              this.store.dispatch(new NavigateRouteAction([route, selection.first.entry.id]));
-            }
-          });
-      }
-    })
+  expandInfoDrawer$ = createEffect(
+    () =>
+      this.actions$.pipe(
+        ofType<ExpandInfoDrawerAction>(NodeActionTypes.ExpandInfoDrawer),
+        map((action) => {
+          if (action && action.payload) {
+            const route = 'personal-files/details';
+            this.store.dispatch(new NavigateRouteAction([route, action.payload.entry.id]));
+          } else {
+            this.store
+              .select(getAppSelection)
+              .pipe(take(1))
+              .subscribe((selection) => {
+                if (selection && !selection.isEmpty) {
+                  const route = 'personal-files/details';
+                  this.store.dispatch(new NavigateRouteAction([route, selection.first.entry.id]));
+                }
+              });
+          }
+        })
+      ),
+    { dispatch: false }
   );
 
-  @Effect({ dispatch: false })
-  manageVersions$ = this.actions$.pipe(
-    ofType<ManageVersionsAction>(NodeActionTypes.ManageVersions),
-    map((action) => {
-      if (action && action.payload) {
-        this.contentService.manageVersions(action.payload);
-      } else {
-        this.store
-          .select(getAppSelection)
-          .pipe(take(1))
-          .subscribe((selection) => {
-            if (selection && selection.file) {
-              this.contentService.manageVersions(selection.file);
-            }
-          });
-      }
-    })
+  manageVersions$ = createEffect(
+    () =>
+      this.actions$.pipe(
+        ofType<ManageVersionsAction>(NodeActionTypes.ManageVersions),
+        map((action) => {
+          if (action && action.payload) {
+            this.contentService.manageVersions(action.payload);
+          } else {
+            this.store
+              .select(getAppSelection)
+              .pipe(take(1))
+              .subscribe((selection) => {
+                if (selection && selection.file) {
+                  this.contentService.manageVersions(selection.file);
+                }
+              });
+          }
+        })
+      ),
+    { dispatch: false }
   );
 
-  @Effect({ dispatch: false })
-  printFile$ = this.actions$.pipe(
-    ofType<PrintFileAction>(NodeActionTypes.PrintFile),
-    map((action) => {
-      if (action && action.payload) {
-        this.printFile(action.payload);
-      } else {
-        this.store
-          .select(getAppSelection)
-          .pipe(take(1))
-          .subscribe((selection) => {
-            if (selection && selection.file) {
-              this.printFile(selection.file);
-            }
-          });
-      }
-    })
+  printFile$ = createEffect(
+    () =>
+      this.actions$.pipe(
+        ofType<PrintFileAction>(NodeActionTypes.PrintFile),
+        map((action) => {
+          if (action && action.payload) {
+            this.printFile(action.payload);
+          } else {
+            this.store
+              .select(getAppSelection)
+              .pipe(take(1))
+              .subscribe((selection) => {
+                if (selection && selection.file) {
+                  this.printFile(selection.file);
+                }
+              });
+          }
+        })
+      ),
+    { dispatch: false }
   );
 
-  @Effect({ dispatch: false })
-  unlockWrite$ = this.actions$.pipe(
-    ofType<UnlockWriteAction>(NodeActionTypes.UnlockForWriting),
-    map((action) => {
-      if (action && action.payload) {
-        this.contentService.unlockNode(action.payload);
-      } else {
-        this.store
-          .select(getAppSelection)
-          .pipe(take(1))
-          .subscribe((selection) => {
-            if (selection && selection.file) {
-              this.contentService.unlockNode(selection.file);
-            }
-          });
-      }
-    })
+  unlockWrite$ = createEffect(
+    () =>
+      this.actions$.pipe(
+        ofType<UnlockWriteAction>(NodeActionTypes.UnlockForWriting),
+        map((action) => {
+          if (action && action.payload) {
+            this.contentService.unlockNode(action.payload);
+          } else {
+            this.store
+              .select(getAppSelection)
+              .pipe(take(1))
+              .subscribe((selection) => {
+                if (selection && selection.file) {
+                  this.contentService.unlockNode(selection.file);
+                }
+              });
+          }
+        })
+      ),
+    { dispatch: false }
   );
 
-  @Effect({ dispatch: false })
-  aspectList$ = this.actions$.pipe(
-    ofType<ManageAspectsAction>(NodeActionTypes.ChangeAspects),
-    map((action) => {
-      if (action && action.payload) {
-        this.contentService.manageAspects(action.payload);
-      } else {
-        this.store
-          .select(getAppSelection)
-          .pipe(take(1))
-          .subscribe((selection) => {
-            if (selection && !selection.isEmpty) {
-              this.contentService.manageAspects(selection.nodes[0]);
-            }
-          });
-      }
-    })
+  aspectList$ = createEffect(
+    () =>
+      this.actions$.pipe(
+        ofType<ManageAspectsAction>(NodeActionTypes.ChangeAspects),
+        map((action) => {
+          if (action && action.payload) {
+            this.contentService.manageAspects(action.payload);
+          } else {
+            this.store
+              .select(getAppSelection)
+              .pipe(take(1))
+              .subscribe((selection) => {
+                if (selection && !selection.isEmpty) {
+                  this.contentService.manageAspects(selection.nodes[0]);
+                }
+              });
+          }
+        })
+      ),
+    { dispatch: false }
   );
 
   printFile(node: any) {

app/src/app/store/effects/search.effects.ts

@@ -23,7 +23,7 @@
  * along with Alfresco. If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { Effect, Actions, ofType } from '@ngrx/effects';
+import { Actions, ofType, createEffect } from '@ngrx/effects';
 import { Injectable } from '@angular/core';
 import { map } from 'rxjs/operators';
 import { SearchActionTypes, SearchByTermAction, SearchOptionIds } from '@alfresco/aca-shared/store';
@@ -33,19 +33,22 @@ import { Router } from '@angular/router';
 export class SearchEffects {
   constructor(private actions$: Actions, private router: Router) {}
 
-  @Effect({ dispatch: false })
-  searchByTerm$ = this.actions$.pipe(
-    ofType<SearchByTermAction>(SearchActionTypes.SearchByTerm),
-    map((action) => {
-      const query = action.payload.replace(/[(]/g, '%28').replace(/[)]/g, '%29');
+  searchByTerm$ = createEffect(
+    () =>
+      this.actions$.pipe(
+        ofType<SearchByTermAction>(SearchActionTypes.SearchByTerm),
+        map((action) => {
+          const query = action.payload.replace(/[(]/g, '%28').replace(/[)]/g, '%29');
 
-      const libItem = action.searchOptions.find((item) => item.id === SearchOptionIds.Libraries);
-      const librarySelected = !!libItem && libItem.value;
-      if (librarySelected) {
-        this.router.navigateByUrl('/search-libraries;q=' + encodeURIComponent(query));
-      } else {
-        this.router.navigateByUrl('/search;q=' + encodeURIComponent(query));
-      }
-    })
+          const libItem = action.searchOptions.find((item) => item.id === SearchOptionIds.Libraries);
+          const librarySelected = !!libItem && libItem.value;
+          if (librarySelected) {
+            this.router.navigateByUrl('/search-libraries;q=' + encodeURIComponent(query));
+          } else {
+            this.router.navigateByUrl('/search;q=' + encodeURIComponent(query));
+          }
+        })
+      ),
+    { dispatch: false }
   );
 }

app/src/app/store/effects/template.effects.ts

@@ -23,7 +23,7 @@
  * along with Alfresco. If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { Effect, Actions, ofType } from '@ngrx/effects';
+import { Actions, ofType, createEffect } from '@ngrx/effects';
 import { Injectable } from '@angular/core';
 import { map, switchMap, debounceTime, take, catchError } from 'rxjs/operators';
 import { Store } from '@ngrx/store';
@@ -46,7 +46,7 @@ import { MatDialog } from '@angular/material/dialog';
 
 @Injectable()
 export class TemplateEffects {
-  _nodesApi: NodesApi;
+  private _nodesApi: NodesApi;
   get nodesApi(): NodesApi {
     this._nodesApi = this._nodesApi ?? new NodesApi(this.apiService.getInstance());
     return this._nodesApi;
@@ -61,53 +61,65 @@ export class TemplateEffects {
     private nodeTemplateService: NodeTemplateService
   ) {}
 
-  @Effect({ dispatch: false })
-  fileFromTemplate$ = this.actions$.pipe(
-    ofType<FileFromTemplate>(TemplateActionTypes.FileFromTemplate),
-    map(() => {
-      this.openDialog({
-        primaryPathName: 'app:node_templates',
-        selectionType: 'file'
-      });
-    })
+  fileFromTemplate$ = createEffect(
+    () =>
+      this.actions$.pipe(
+        ofType<FileFromTemplate>(TemplateActionTypes.FileFromTemplate),
+        map(() => {
+          this.openDialog({
+            primaryPathName: 'app:node_templates',
+            selectionType: 'file'
+          });
+        })
+      ),
+    { dispatch: false }
   );
 
-  @Effect({ dispatch: false })
-  folderFromTemplate$ = this.actions$.pipe(
-    ofType<FolderFromTemplate>(TemplateActionTypes.FolderFromTemplate),
-    map(() =>
-      this.openDialog({
-        primaryPathName: 'app:space_templates',
-        selectionType: 'folder'
-      })
-    )
-  );
-
-  @Effect({ dispatch: false })
-  createFromTemplate$ = this.actions$.pipe(
-    ofType<CreateFromTemplate>(TemplateActionTypes.CreateFromTemplate),
-    map((action) => {
-      this.store
-        .select(getCurrentFolder)
-        .pipe(
-          switchMap((folder) => this.copyNode(action.payload, folder.id)),
-          take(1)
+  folderFromTemplate$ = createEffect(
+    () =>
+      this.actions$.pipe(
+        ofType<FolderFromTemplate>(TemplateActionTypes.FolderFromTemplate),
+        map(() =>
+          this.openDialog({
+            primaryPathName: 'app:space_templates',
+            selectionType: 'folder'
+          })
         )
-        .subscribe((node: NodeEntry | null) => {
-          if (node) {
-            this.store.dispatch(new CreateFromTemplateSuccess(node.entry));
-          }
-        });
-    })
+      ),
+    { dispatch: false }
   );
 
-  @Effect({ dispatch: false })
-  createFromTemplateSuccess$ = this.actions$.pipe(
-    ofType<CreateFromTemplateSuccess>(TemplateActionTypes.CreateFromTemplateSuccess),
-    map((payload) => {
-      this.matDialog.closeAll();
-      this.appHookService.reload.next(payload.node);
-    })
+  createFromTemplate$ = createEffect(
+    () =>
+      this.actions$.pipe(
+        ofType<CreateFromTemplate>(TemplateActionTypes.CreateFromTemplate),
+        map((action) => {
+          this.store
+            .select(getCurrentFolder)
+            .pipe(
+              switchMap((folder) => this.copyNode(action.payload, folder.id)),
+              take(1)
+            )
+            .subscribe((node: NodeEntry | null) => {
+              if (node) {
+                this.store.dispatch(new CreateFromTemplateSuccess(node.entry));
+              }
+            });
+        })
+      ),
+    { dispatch: false }
+  );
+
+  createFromTemplateSuccess$ = createEffect(
+    () =>
+      this.actions$.pipe(
+        ofType<CreateFromTemplateSuccess>(TemplateActionTypes.CreateFromTemplateSuccess),
+        map((payload) => {
+          this.matDialog.closeAll();
+          this.appHookService.reload.next(payload.node);
+        })
+      ),
+    { dispatch: false }
   );
 
   private openDialog(config: TemplateDialogConfig) {

app/src/app/store/effects/upload.effects.ts

@@ -35,7 +35,7 @@ import {
 } from '@alfresco/aca-shared/store';
 import { FileModel, FileUtils, UploadService } from '@alfresco/adf-core';
 import { Injectable, NgZone, RendererFactory2 } from '@angular/core';
-import { Actions, Effect, ofType } from '@ngrx/effects';
+import { Actions, ofType, createEffect } from '@ngrx/effects';
 import { Store } from '@ngrx/store';
 import { of } from 'rxjs';
 import { catchError, map, take } from 'rxjs/operators';
@@ -85,34 +85,43 @@ export class UploadEffects {
     renderer.appendChild(document.body, this.folderInput);
   }
 
-  @Effect({ dispatch: false })
-  uploadFiles$ = this.actions$.pipe(
-    ofType<UploadFilesAction>(UploadActionTypes.UploadFiles),
-    map(() => {
-      this.fileInput.click();
-    })
+  uploadFiles$ = createEffect(
+    () =>
+      this.actions$.pipe(
+        ofType<UploadFilesAction>(UploadActionTypes.UploadFiles),
+        map(() => {
+          this.fileInput.click();
+        })
+      ),
+    { dispatch: false }
   );
 
-  @Effect({ dispatch: false })
-  uploadFolder$ = this.actions$.pipe(
-    ofType<UploadFolderAction>(UploadActionTypes.UploadFolder),
-    map(() => {
-      this.folderInput.click();
-    })
+  uploadFolder$ = createEffect(
+    () =>
+      this.actions$.pipe(
+        ofType<UploadFolderAction>(UploadActionTypes.UploadFolder),
+        map(() => {
+          this.folderInput.click();
+        })
+      ),
+    { dispatch: false }
   );
 
-  @Effect({ dispatch: false })
-  uploadVersion$ = this.actions$.pipe(
-    ofType<UploadFileVersionAction>(UploadActionTypes.UploadFileVersion),
-    map((action) => {
-      if (action?.payload) {
-        const node = action?.payload?.detail?.data?.node?.entry;
-        const file: any = action?.payload?.detail?.files[0]?.file;
-        this.contentService.versionUpdateDialog(node, file);
-      } else if (!action?.payload) {
-        this.fileVersionInput.click();
-      }
-    })
+  uploadVersion$ = createEffect(
+    () =>
+      this.actions$.pipe(
+        ofType<UploadFileVersionAction>(UploadActionTypes.UploadFileVersion),
+        map((action) => {
+          if (action?.payload) {
+            const node = action?.payload?.detail?.data?.node?.entry;
+            const file: any = action?.payload?.detail?.files[0]?.file;
+            this.contentService.versionUpdateDialog(node, file);
+          } else if (!action?.payload) {
+            this.fileVersionInput.click();
+          }
+        })
+      ),
+    { dispatch: false }
   );
 
   uploadVersion() {

app/src/app/store/effects/viewer.effects.ts

@@ -23,7 +23,7 @@
  * along with Alfresco. If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { Effect, Actions, ofType } from '@ngrx/effects';
+import { Actions, ofType, createEffect } from '@ngrx/effects';
 import { Injectable } from '@angular/core';
 import { map, take, tap } from 'rxjs/operators';
 import {
@@ -57,106 +57,121 @@ export class ViewerEffects {
     private dialog: MatDialog
   ) {}
 
-  @Effect({ dispatch: false })
-  fullscreenViewer$ = this.actions$.pipe(
-    ofType<FullscreenViewerAction>(ViewerActionTypes.FullScreen),
-    map(() => {
-      this.enterFullScreen();
-    })
+  fullscreenViewer$ = createEffect(
+    () =>
+      this.actions$.pipe(
+        ofType<FullscreenViewerAction>(ViewerActionTypes.FullScreen),
+        map(() => {
+          this.enterFullScreen();
+        })
+      ),
+    { dispatch: false }
   );
 
-  @Effect({ dispatch: false })
-  viewNode$ = this.actions$.pipe(
-    ofType<ViewNodeAction>(ViewerActionTypes.ViewNode),
-    map((action) => {
-      if (action.viewNodeExtras) {
-        const { location, path } = action.viewNodeExtras;
+  viewNode$ = createEffect(
+    () =>
+      this.actions$.pipe(
+        ofType<ViewNodeAction>(ViewerActionTypes.ViewNode),
+        map((action) => {
+          if (action.viewNodeExtras) {
+            const { location, path } = action.viewNodeExtras;
 
-        if (location) {
-          const navigation = this.getNavigationCommands(location);
+            if (location) {
+              const navigation = this.getNavigationCommands(location);
 
-          this.router.navigate([...navigation, { outlets: { viewer: ['view', action.nodeId] } }], {
-            queryParams: { location }
-          });
-        }
+              this.router.navigate([...navigation, { outlets: { viewer: ['view', action.nodeId] } }], {
+                queryParams: { location }
+              });
+            }
 
-        if (path) {
-          this.router.navigate(['view', { outlets: { viewer: [action.nodeId] } }], {
-            queryParams: { path }
-          });
-        }
-      } else {
-        this.router.navigate(['view', { outlets: { viewer: [action.nodeId] } }]);
-      }
-    })
+            if (path) {
+              this.router.navigate(['view', { outlets: { viewer: [action.nodeId] } }], {
+                queryParams: { path }
+              });
+            }
+          } else {
+            this.router.navigate(['view', { outlets: { viewer: [action.nodeId] } }]);
+          }
+        })
+      ),
+    { dispatch: false }
   );
 
-  @Effect({ dispatch: false })
-  viewFile$ = this.actions$.pipe(
-    ofType<ViewFileAction>(ViewerActionTypes.ViewFile),
-    map((action) => {
-      if (action.payload && action.payload.entry) {
-        const { id, nodeId, isFile } = action.payload.entry as any;
+  viewFile$ = createEffect(
+    () =>
+      this.actions$.pipe(
+        ofType<ViewFileAction>(ViewerActionTypes.ViewFile),
+        map((action) => {
+          if (action.payload && action.payload.entry) {
+            const { id, nodeId, isFile } = action.payload.entry as any;
 
-        if (this.extensions.canPreviewNode(action.payload) && (isFile || nodeId)) {
-          this.displayPreview(nodeId || id, action.parentId);
-        }
-      } else {
-        this.store
-          .select(fileToPreview)
-          .pipe(take(1))
-          .subscribe((result) => {
-            if (result.selection && result.selection.file) {
-              const { id, nodeId, isFile } = result.selection.file.entry as any;
+            if (this.extensions.canPreviewNode(action.payload) && (isFile || nodeId)) {
+              this.displayPreview(nodeId || id, action.parentId);
+            }
+          } else {
+            this.store
+              .select(fileToPreview)
+              .pipe(take(1))
+              .subscribe((result) => {
+                if (result.selection && result.selection.file) {
+                  const { id, nodeId, isFile } = result.selection.file.entry as any;
 
-              if (this.extensions.canPreviewNode(action.payload) && (isFile || nodeId)) {
-                const parentId = result.folder ? result.folder.id : null;
-                this.displayPreview(nodeId || id, parentId);
+                  if (this.extensions.canPreviewNode(action.payload) && (isFile || nodeId)) {
+                    const parentId = result.folder ? result.folder.id : null;
+                    this.displayPreview(nodeId || id, parentId);
+                  }
+                }
+              });
+          }
+        })
+      ),
+    { dispatch: false }
+  );
+
+  viewNodeVersion$ = createEffect(
+    () =>
+      this.actions$.pipe(
+        ofType<ViewNodeVersionAction>(ViewerActionTypes.ViewNodeVersion),
+        map((action) => {
+          this.dialog.closeAll();
+          if (action.viewNodeExtras) {
+            const { location, path } = action.viewNodeExtras;
+            if (location) {
+              const navigation = this.getNavigationCommands(location);
+              this.router.navigate([...navigation, { outlets: { viewer: ['view', action.nodeId, action.versionId] } }], {
+                queryParams: { location }
+              });
+            }
+
+            if (path) {
+              this.router.navigate(['view', { outlets: { viewer: [action.nodeId, action.versionId] } }], {
+                queryParams: { path }
+              });
+            }
+          } else {
+            this.router.navigate(['view', { outlets: { viewer: [action.nodeId, action.versionId] } }]);
+          }
+        })
+      ),
+    { dispatch: false }
+  );
+
+  pluginPreview$ = createEffect(
+    () =>
+      this.actions$.pipe(
+        ofType<PluginPreviewAction>(ViewerActionTypes.PluginPreview),
+        tap((action) => {
+          this.router.navigate([
+            action.pluginRoute,
+            {
+              outlets: {
+                viewer: ['preview', action.nodeId]
               }
             }
-          });
-      }
-    })
-  );
-
-  @Effect({ dispatch: false })
-  viewNodeVersion$ = this.actions$.pipe(
-    ofType<ViewNodeVersionAction>(ViewerActionTypes.ViewNodeVersion),
-    map((action) => {
-      this.dialog.closeAll();
-      if (action.viewNodeExtras) {
-        const { location, path } = action.viewNodeExtras;
-        if (location) {
-          const navigation = this.getNavigationCommands(location);
-          this.router.navigate([...navigation, { outlets: { viewer: ['view', action.nodeId, action.versionId] } }], {
-            queryParams: { location }
-          });
-        }
-
-        if (path) {
-          this.router.navigate(['view', { outlets: { viewer: [action.nodeId, action.versionId] } }], {
-            queryParams: { path }
-          });
-        }
-      } else {
-        this.router.navigate(['view', { outlets: { viewer: [action.nodeId, action.versionId] } }]);
-      }
-    })
-  );
-
-  @Effect({ dispatch: false })
-  pluginPreview$ = this.actions$.pipe(
-    ofType<PluginPreviewAction>(ViewerActionTypes.PluginPreview),
-    tap((action) => {
-      this.router.navigate([
-        action.pluginRoute,
-        {
-          outlets: {
-            viewer: ['preview', action.nodeId]
-          }
-        }
-      ]);
-    })
+          ]);
+        })
+      ),
+    { dispatch: false }
   );
 
   private displayPreview(nodeId: string, parentId: string) {