fix(router-store): ignore trailing slash when comparing routes (#2834)

Closes #2829, #1781

modules/router-store/spec/integration.spec.ts

@@ -18,6 +18,7 @@ import {
  ROUTER_NAVIGATED,
  ROUTER_NAVIGATION,
  ROUTER_REQUEST,
+ routerNavigationAction,
  RouterAction,
  routerReducer,
  RouterReducerState,
@@ -169,6 +170,32 @@ describe('integration spec', () => {
  });
  });
 
+ it('should ignore routing actions for the URL that is currently open', async () => {
+ createTestModule({
+ reducers: { router: routerReducer },
+ });
+
+ const router = TestBed.inject(Router);
+ const store = TestBed.inject(Store);
+ const navigateByUrlSpy = jest.spyOn(router, 'navigateByUrl');
+
+ await router.navigateByUrl('/');
+
+ const SAME_URL_WITHOUT_SLASH = '';
+
+ store.dispatch(
+ routerNavigationAction({
+ payload: {
+ routerState: { url: SAME_URL_WITHOUT_SLASH, root: {} as any },
+ event: { id: 123 } as any,
+ },
+ })
+ );
+
+ // Navigates only ONCE 👇
+ expect(navigateByUrlSpy.mock.calls.length).toBe(1);
+ });
+
  it('should support rolling back if navigation gets canceled (navigation initialized through router)', (done: any) => {
  const reducer = (state: string = '', action: RouterAction<any>): any => {
  if (action.type === ROUTER_NAVIGATION) {
@@ -573,7 +600,7 @@ describe('integration spec', () => {
 
  expect(log).toEqual([
  { type: 'store', state: null }, // initial state
- { type: 'store', state: null }, // ROUTER_REQEST event in the store
+ { type: 'store', state: null }, // ROUTER_REQUEST event in the store
  { type: 'action', action: ROUTER_REQUEST },
  { type: 'router', event: 'NavigationStart', url: '/load' },
  { type: 'store', state: { url: '', navigationId: 1 } },

modules/router-store/src/router_store_module.ts

@@ -219,7 +219,7 @@ export class StoreRouterConnectingModule {
  }
 
  const url = routerStoreState.state.url;
- if (this.router.url !== url) {
+ if (!isSameUrl(this.router.url, url)) {
  this.storeState = storeState;
  this.trigger = RouterTrigger.STORE;
  this.router.navigateByUrl(url).catch((error) => {
@@ -347,3 +347,17 @@ export class StoreRouterConnectingModule {
  this.routerState = null;
  }
 }
+
+/**
+ * Check if the URLs are matching. Accounts for the possibility of trailing "/" in url.
+ */
+function isSameUrl(first: string, second: string): boolean {
+ return stripTrailingSlash(first) === stripTrailingSlash(second);
+}
+
+function stripTrailingSlash(text: string): string {
+ if (text.length > 0 && text[text.length - 1] === '/') {
+ return text.substring(0, text.length - 1);
+ }
+ return text;
+}