Routing data inaczej działa lokalnie a inaczej po zdeployowaniu

Witam. Robie sobię autoryzacje w różnych miejscach aplikacji. w kodzie angulara mam stałe:

const roleActions = { 
  accountAuthority: {
    CAN_GET_OTHER_ACCOUNT_DETAILS: 'CAN_GET_OTHER_ACCOUNT_DETAILS',
  }
}

w htmlu mam np coś takiego.

<li *requiredRoless='accountSettingsAuthRolesProvider()'  class="dropdown_option"  >

gdzie

accountSettingsAuthRolesProvider(): Array<string> {
        return [roleActions.accountAuthority.CAN_GET_ACCOUNT_DETAILS];
    }

requiredRoless to dyrektywa która ma wstrzyknięty serwis i albo nie robi zmian albo ukrywa dany element na stronie i to działa dobrze.

Ale też chce zabezpieczyć żeby nie można było wpisywać z palca urla to mam coś takiego:

export const settingsRoute: Route = {
  path: 'settings',
  component: SettingsComponent,
  data: {
      authorities: [roleActions.accountAuthority.CAN_GET_ACCOUNT_DETAILS],
      pageTitle: 'global.menu.account.settings'
  },
  canActivate: [UserRouteAccessService]
};

klasa UserRouteAccessService:

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean | Promise<boolean> {
      const authorities = route.data['authorities']; //        

      return this.checkLogin(authorities, state.url);
  }

Problem mam z odczytaniem authorities. Tzn dostaje coś takiego [null]. Czyli tablica co ma w sobie pusty obiekt.

Ale uwaga. Na lokalu działa wszystko dobrze a po deployu (tego ja nie robię) jest lipa.
I dyrektywa też działa dobrze po deployu.

Problem rozwiązałem, używając zamiast

const roleActions = { 
  accountAuthority: {
    CAN_GET_OTHER_ACCOUNT_DETAILS: 'CAN_GET_OTHER_ACCOUNT_DETAILS',
  }
}

klasy ze statycznymi polami