WIP: Introduce ui router hybrid

frontend/app/angular-modules.ts

@@ -30,7 +30,7 @@ declare const I18n: op.I18n;
 
 // global
 export const opUiComponentsModule = angular.module('openproject.uiComponents',
-  ['ui.select', 'ui.router', 'openproject.workPackages.services'])
+  ['ui.select', 'openproject.workPackages.services'])
   .run(['$rootScope', function ($rootScope:ng.IRootScopeService) {
     ($rootScope as any)['I18n'] = I18n;
   }]);
@@ -113,8 +113,7 @@ angular.module('openproject.timeEntries', [
 angular.module('openproject.timeEntries.controllers', []);
 
 angular.module('openproject.layout', [
-  'openproject.layout.controllers',
-  'ui.router'
+  'openproject.layout.controllers'
 ]);
 angular.module('openproject.layout.controllers', []);
 
@@ -138,13 +137,14 @@ export const filtersModule = angular.module('openproject.filters', [
 ]);
 
 export const wpButtonsModule = angular.module('openproject.wpButtons',
-  ['ui.router', 'openproject.services']);
+  ['openproject.services']);
 
 // main app
 var angularDragula:any = require('angular-dragula');
 
 export const openprojectModule = angular.module('openproject', [
   'ui.router',
+  'ui.router.upgrade',
   'openproject.animations',
   'openproject.config',
   'openproject.uiComponents',

frontend/app/angular4-modules.ts

@@ -26,7 +26,7 @@
 // See doc/COPYRIGHT.rdoc for more details.
 // ++
 
-import {NgModule} from '@angular/core';
+import {Injector, NgModule} from '@angular/core';
 import {BrowserModule} from '@angular/platform-browser';
 import {UpgradeModule} from '@angular/upgrade/static';
 import {FormsModule} from '@angular/forms';
@@ -100,12 +100,16 @@ import {WorkPackageZenModeButtonComponent} from 'core-components/wp-buttons/wp-z
 import {WorkPackageFilterContainerComponent} from 'core-components/filters/filter-container/filter-container.directive';
 import WorkPackageFiltersService from 'core-components/filters/wp-filters/wp-filters.service';
 import {Ng1QueryFiltersComponentWrapper} from 'core-components/filters/query-filters/query-filters-ng1-wrapper.component';
+import {getUIRouter, UIRouterUpgradeModule} from '@uirouter/angular-hybrid';
+import {UIRouter, UrlService} from '@uirouter/core';
+import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
 
 @NgModule({
   imports: [
     BrowserModule,
     UpgradeModule,
-    FormsModule
+    FormsModule,
+    UIRouterUpgradeModule
   ],
   providers: [
     GonRef,
@@ -190,7 +194,7 @@ import {Ng1QueryFiltersComponentWrapper} from 'core-components/filters/query-fil
   ]
 })
 export class OpenProjectModule {
-  constructor(private upgrade:UpgradeModule) {
+  constructor(private upgrade:UpgradeModule, private injector:Injector) {
   }
 
   // noinspection JSUnusedGlobalSymbols
@@ -198,3 +202,5 @@ export class OpenProjectModule {
     this.upgrade.bootstrap(document.body, ['openproject'], {strictDi: false});
   }
 }
+
+

frontend/app/angular4-transition-utils.ts

@@ -28,7 +28,7 @@
 
 import {InjectionToken} from '@angular/core';
 import {IQService, IRootScopeService, ITimeoutService} from 'angular';
-import {StateService} from '@uirouter/angularjs';
+import {StateService} from '@uirouter/core';
 
 export const $rootScopeToken = new InjectionToken<IRootScopeService>('$rootScope');
 export const $qToken = new InjectionToken<IQService>('$q');

frontend/app/components/common/autocomplete/lazyloaded/lazyloaded-autocompleter.ts

@@ -12,7 +12,7 @@ export abstract class ILazyAutocompleterBridge<T> {
   public currentPage:number;
 
   // Input autocomplete element
-  public input:JQuery;
+  public input:any;
 
   // Fuzzy instance for the results
   public fuseInstance:any;
@@ -225,7 +225,7 @@ export namespace LazyLoadedAutocompleter {
           .appendTo(ul);
 
         if (term !== '') {
-          element.mark(term, {className: 'ui-autocomplete-match'});
+          (element as any).mark(term, {className: 'ui-autocomplete-match'});
         }
 
         return element;

frontend/app/components/context-menus/context-menu.service.ts

@@ -26,7 +26,7 @@
 // See doc/COPYRIGHT.rdoc for more details.
 // ++
 
-import {TransitionService} from '@uirouter/angularjs';
+import {TransitionService} from '@uirouter/core';
 
 interface ContextMenu {
   close(disableFocus?:boolean):Promise<void>;

frontend/app/components/context-menus/types-context-menu/types-context-menu.service.ts

@@ -29,7 +29,7 @@
 import {opWorkPackagesModule} from '../../../angular-modules';
 import {WorkPackageCreateService} from '../../wp-create/wp-create.service';
 import {CollectionResource} from '../../api/api-v3/hal-resources/collection-resource.service';
-import {StateService} from '@uirouter/angularjs';
+import {StateService} from '@uirouter/core';
 
 
 class TypesContextMenuController {

frontend/app/components/context-menus/wp-context-menu/wp-context-menu.controller.ts

@@ -30,7 +30,7 @@ import {WorkPackageTableSelection} from '../../wp-fast-table/state/wp-table-sele
 import {ContextMenuService} from '../context-menu.service';
 import {WorkPackageRelationsHierarchyService} from "../../wp-relations/wp-relations-hierarchy/wp-relations-hierarchy.service";
 import {States} from '../../states.service';
-import {StateService} from '@uirouter/angularjs';
+import {StateService} from '@uirouter/core';
 
 function wpContextMenuController($scope:any,
                                  $rootScope:ng.IRootScopeService,

frontend/app/components/context-menus/wp-status-context-menu/wp-status-context-menu.service.ts

@@ -36,7 +36,7 @@ class WpStatusContextMenuController {
   public status:CollectionResource[] = [];
 
   constructor(protected $timeout:ng.ITimeoutService,
-              protected $scope:ng.IScope,
+              protected $scope:any,
               protected wpEditing:WorkPackageEditingService,
               protected wpNotificationsService:WorkPackageNotificationService,
               protected wpTableRefresh:WorkPackageTableRefreshService) {

frontend/app/components/modals/wp-destroy-modal/wp-destroy-modal.controller.ts

@@ -30,7 +30,7 @@ import {wpControllersModule} from '../../../angular-modules';
 import {States} from '../../states.service';
 import {WorkPackageResourceInterface} from '../../api/api-v3/hal-resources/work-package-resource.service';
 import {WorkPackageTableFocusService} from 'core-components/wp-fast-table/state/wp-table-focus.service';
-import {StateService} from '@uirouter/angularjs';
+import {StateService} from '@uirouter/core';
 
 export class WorkPackageDestroyModalController {
   public text:any;

frontend/app/components/projects/project-menu-autocomplete/project-menu-autocomplete.component.ts

@@ -85,7 +85,7 @@ export class ProjectMenuAutocompleteController extends ILazyAutocompleterBridge<
   }
 
   public close() {
-    this.input.projectMenuAutocomplete('destroy');
+    (this.input as any).projectMenuAutocomplete('destroy');
     this.$element.find('.project-search-results').css('visibility', 'hidden');
   }
 
@@ -227,7 +227,7 @@ export class ProjectMenuAutocompleteController extends ILazyAutocompleterBridge<
     this.input.keydown((evt:JQueryKeyEventObject) => {
       if (evt.which === keyCodes.ESCAPE) {
         this.input.val('');
-        this.input[this.widgetName].call(this.input, 'search', '');
+        (this.input as any)[this.widgetName].call(this.input, 'search', '');
         return false;
       }
 

frontend/app/components/routing/main/work-packages.controller.ts

@@ -26,13 +26,13 @@
 // See doc/COPYRIGHT.rdoc for more details.
 // ++
 
-import {StateService, StateParams} from '@uirouter/angularjs';
+import {StateService, StateParams} from '@uirouter/core';
 
 angular
   .module('openproject.workPackages.controllers')
   .controller('WorkPackagesController', WorkPackagesController);
 
-function WorkPackagesController($scope:ng.IScope,
+function WorkPackagesController($scope:any,
                                 $state:StateService,
                                 $stateParams:StateParams) {
 

frontend/app/components/routing/ui-router.config.ts

@@ -28,8 +28,7 @@
 
 import {openprojectModule} from '../../angular-modules';
 import {FirstRouteService} from 'app/components/routing/first-route-service';
-import {Transition, TransitionService} from '@uirouter/core';
-import {StateProvider, UrlMatcherFactory, UrlRouterProvider} from '@uirouter/angularjs';
+import {Transition, TransitionService, UrlMatcherFactory, UrlService} from '@uirouter/core';
 
 const panels = {
   get overview() {
@@ -76,11 +75,14 @@ const panels = {
 };
 
 openprojectModule
-  .config(($stateProvider:StateProvider,
-           $urlRouterProvider:UrlRouterProvider,
+  .config(($stateProvider:any,
+           $urlRouterProvider:any,
            $urlMatcherFactoryProvider:UrlMatcherFactory) => {
+
     $urlMatcherFactoryProvider.strictMode(false);
 
+    console.error("Config ui-router.config");
+
     // Prepend the baseurl to the route to avoid using a base tag
     // For more information, see
     // https://github.com/angular/angular.js/issues/5519
@@ -98,6 +100,7 @@ openprojectModule
           query_id: { dynamic: true },
           query_props: { dynamic: true }
         },
+        onEnter: () => console.error("ENTERING!"),
         templateUrl: '/components/routing/main/work-packages.html',
         controller: 'WorkPackagesController'
       })
@@ -145,7 +148,6 @@ openprojectModule
       .state('work-packages.show.watchers', panels.watchers)
 
       .state('work-packages.list', {
-        url: '',
         controller: 'WorkPackagesListRouter',
         template: '<wp-list></wp-list>',
         reloadOnSearch: false,
@@ -204,9 +206,13 @@ openprojectModule
         firstRoute:FirstRouteService,
         $timeout:ng.ITimeoutService,
         $rootScope:ng.IRootScopeService,
+        $trace:any,
         $transitions:TransitionService,
         $window:ng.IWindowService) => {
 
+      console.error("RUN ui-router config");
+      $trace.enable(1);
+
       // Our application is still a hybrid one, meaning most routes are still
       // handled by Rails. As such, we disable the default link-hijacking that
       // Angular's HTML5-mode turns on.

frontend/app/components/routing/wp-details/wp-details.controller.ts

@@ -35,7 +35,7 @@ import {WorkPackageViewController} from "../wp-view-base/wp-view-base.controller
 import {WorkPackageEditingService} from '../../wp-edit-form/work-package-editing-service';
 import {FirstRouteService} from "core-components/routing/first-route-service";
 import {WorkPackageTableFocusService} from "core-components/wp-fast-table/state/wp-table-focus.service";
-import {StateService} from '@uirouter/angularjs';
+import {StateService} from '@uirouter/core';
 
 export class WorkPackageDetailsController extends WorkPackageViewController {
 

frontend/app/components/routing/wp-list/wp-list.component.ts

@@ -27,7 +27,7 @@
 // ++
 
 import {Component, Inject, OnDestroy, OnInit} from '@angular/core';
-import {StateService} from '@uirouter/angularjs';
+import {StateService} from '@uirouter/core';
 import {untilComponentDestroyed} from 'ng2-rx-componentdestroyed';
 import {auditTime, distinctUntilChanged, filter, withLatestFrom} from 'rxjs/operators';
 import {debugLog} from '../../../helpers/debug_output';

frontend/app/components/routing/wp-show/wp-show.controller.ts

@@ -34,7 +34,7 @@ import {WorkPackageViewController} from "../wp-view-base/wp-view-base.controller
 import {WorkPackagesListChecksumService} from "../../wp-list/wp-list-checksum.service";
 import {WorkPackageMoreMenuService} from '../../work-packages/work-package-more-menu.service'
 import {WorkPackageTableFocusService} from "core-components/wp-fast-table/state/wp-table-focus.service";
-import {StateService} from '@uirouter/angularjs';
+import {StateService} from '@uirouter/core';
 import {TypeResource} from "core-components/api/api-v3/hal-resources/type-resource.service";
 
 export class WorkPackageShowController extends WorkPackageViewController {

frontend/app/components/routing/wp-view-base/wp-view-base.controller.ts

@@ -36,7 +36,7 @@ import {WorkPackageTableRefreshService} from '../../wp-table/wp-table-refresh-re
 import {$injectFields} from '../../angular/angular-injector-bridge.functions';
 import {WorkPackageEditingService} from '../../wp-edit-form/work-package-editing-service';
 import {WorkPackageTableFocusService} from 'core-components/wp-fast-table/state/wp-table-focus.service';
-import {StateService} from '@uirouter/angularjs';
+import {StateService} from '@uirouter/core';
 
 export class WorkPackageViewController {
 

frontend/app/components/work-packages/work-package-authorization.service.ts

@@ -29,7 +29,7 @@
 
 import {opWorkPackagesModule} from '../../angular-modules';
 import {WorkPackageResourceInterface} from '../api/api-v3/hal-resources/work-package-resource.service';
-import {StateService} from '@uirouter/angularjs';
+import {StateService} from '@uirouter/core';
 
 var $state:StateService;
 var PathHelper:any;

frontend/app/components/work-packages/work-package-more-menu.service.ts

@@ -30,7 +30,7 @@ import {WorkPackageResource} from '../api/api-v3/hal-resources/work-package-reso
 import {States} from '../states.service';
 import {$injectFields} from '../angular/angular-injector-bridge.functions';
 import {PathHelperFunctions} from 'core-components/common/path-helper/path-helper.functions';
-import {StateService} from '@uirouter/angularjs';
+import {StateService} from '@uirouter/core';
 import {AuthorisationService} from 'core-components/common/model-auth/model-auth.service';
 
 var $state:StateService;

frontend/app/components/work-packages/work-package.service.ts

@@ -28,7 +28,7 @@
 
 import {States} from "../states.service";
 import {WorkPackageTableRefreshService} from '../wp-table/wp-table-refresh-request.service';
-import {StateService} from '@uirouter/angularjs';
+import {StateService} from '@uirouter/core';
 
 angular
     .module('openproject.services')

frontend/app/components/work-packages/wp-attachments-formattable-field/wp-attachments-formattable.directive.ts

@@ -12,7 +12,7 @@ import {SingleAttachmentModel} from './models/single-attachment';
 import {WorkPackageSingleViewController} from '../wp-single-view/wp-single-view.directive';
 import {CommentFieldDirectiveController} from '../work-package-comment/work-package-comment.directive';
 import {UploadFile} from '../../api/op-file-upload/op-file-upload.service';
-import {StateService} from '@uirouter/angularjs';
+import {StateService} from '@uirouter/core';
 
 export class WpAttachmentsFormattableController {
   constructor(protected $scope:any,

frontend/app/components/work-packages/wp-single-view/wp-single-view.directive.ts

@@ -39,7 +39,7 @@ import {
 } from '../../wp-edit-form/work-package-editing-service';
 import {States} from '../../states.service';
 import {CurrentProjectService} from '../../projects/current-project.service';
-import {StateParams} from '@uirouter/angularjs';
+import {StateParams} from '@uirouter/core';
 
 interface FieldDescriptor {
   name:string;

frontend/app/components/work-packages/wp-subject/wp-subject.directive.ts

@@ -33,7 +33,7 @@ import {
   WorkPackageResourceInterface
 } from "../../api/api-v3/hal-resources/work-package-resource.service";
 import {WorkPackageCacheService} from "../work-package-cache.service";
-import {StateParams} from '@uirouter/angularjs';
+import {StateParams} from '@uirouter/core';
 
 export class WorkPackageSubjectController {
 

frontend/app/components/wp-buttons/wp-buttons.module.ts

@@ -27,7 +27,7 @@
 // ++
 
 import {opDirective} from '../open-project.module';
-import {StateService} from '@uirouter/angularjs';
+import {StateService} from '@uirouter/core';
 
 export interface ButtonControllerText {
   activate:string;

frontend/app/components/wp-buttons/wp-create-button/wp-create-button.component.ts

@@ -27,7 +27,7 @@
 // ++
 
 import {wpButtonsModule} from '../../../angular-modules';
-import {StateService} from '@uirouter/angularjs';
+import {StateService} from '@uirouter/core';
 import {downgradeComponent} from '@angular/upgrade/static'
 import {Component, Inject, Input} from '@angular/core';
 import {$stateToken, I18nToken} from 'core-app/angular4-transition-utils';

frontend/app/components/wp-buttons/wp-details-view-button/wp-details-view-button.component.ts

@@ -30,7 +30,7 @@ import {wpButtonsModule} from '../../../angular-modules';
 import {KeepTabService} from '../../wp-panels/keep-tab/keep-tab.service';
 import {States} from '../../states.service';
 import {WorkPackageTableFocusService} from 'core-components/wp-fast-table/state/wp-table-focus.service';
-import {StateService} from '@uirouter/angularjs';
+import {StateService} from '@uirouter/core';
 import {Component, Inject} from '@angular/core';
 import {AbstractWorkPackageButtonComponent} from 'core-components/wp-buttons/wp-buttons.module';
 import {$stateToken, I18nToken} from 'core-app/angular4-transition-utils';

frontend/app/components/wp-buttons/wp-list-view-button/wp-list-view-button.directive.ts

@@ -28,7 +28,7 @@
 
 import {wpButtonsModule} from '../../../angular-modules';
 import {wpButtonDirective} from '../wp-buttons.module';
-import {StateService} from '@uirouter/angularjs';
+import {StateService} from '@uirouter/core';
 import {WorkPackageNavigationButtonComponent} from 'core-components/wp-buttons/wp-buttons.module';
 
 export class WorkPackageListViewButtonController extends WorkPackageNavigationButtonComponent {

frontend/app/components/wp-create/wp-create.controller.ts

@@ -39,7 +39,7 @@ import {WorkPackageEditingService} from '../wp-edit-form/work-package-editing-se
 import {WorkPackageChangeset} from '../wp-edit-form/work-package-changeset';
 import {WorkPackageFilterValues} from '../wp-edit-form/work-package-filter-values';
 import {WorkPackageTableFiltersService} from '../wp-fast-table/state/wp-table-filters.service';
-import {StateService} from '@uirouter/angularjs';
+import {StateService} from '@uirouter/core';
 
 export class WorkPackageCreateController {
   public newWorkPackage:WorkPackageResourceInterface;
@@ -129,7 +129,7 @@ export class WorkPackageCreateController {
 
     return this.wpCreate.createNewTypedWorkPackage(stateParams.projectPath, type).then(changeset => {
       const filter = new WorkPackageFilterValues(changeset, this.wpTableFilters.current, ['type']);
-      return filter.applyDefaultsFromFilters().then(() => changeset);
+      return filter.applyDefaultsFromFilters().then(() => changeset) as ng.IPromise<WorkPackageChangeset>;
     });
   }
 

frontend/app/components/wp-edit-form/single-view-edit-context.ts

@@ -42,7 +42,7 @@ import {WorkPackageEditFieldController} from '../wp-edit/wp-edit-field/wp-edit-f
 import {WorkPackageEditFieldGroupController} from '../wp-edit/wp-edit-field/wp-edit-field-group.directive';
 import {WorkPackageNotificationService} from '../wp-edit/wp-notification.service';
 import {WorkPackageTableSelection} from '../wp-fast-table/state/wp-table-selection.service';
-import {StateService} from '@uirouter/angularjs';
+import {StateService} from '@uirouter/core';
 
 export class SingleViewEditContext implements WorkPackageEditContext {
 

frontend/app/components/wp-edit/wp-notification.service.ts

@@ -29,7 +29,7 @@
 import {WorkPackageResourceInterface} from '../api/api-v3/hal-resources/work-package-resource.service';
 import {ErrorResource} from '../api/api-v3/hal-resources/error-resource.service';
 import {wpServicesModule} from '../../angular-modules';
-import {StateService} from '@uirouter/angularjs';
+import {StateService} from '@uirouter/core';
 
 export class WorkPackageNotificationService {
   constructor(protected I18n:op.I18n,

frontend/app/components/wp-fast-table/builders/ui-state-link-builder.ts

@@ -1,5 +1,5 @@
 import {KeepTabService} from 'core-components/wp-panels/keep-tab/keep-tab.service';
-import {StateService} from '@uirouter/angularjs';
+import {StateService} from '@uirouter/core';
 
 export const uiStateLinkClass = '__ui-state-link';
 export const checkedClassName = '-checked';

frontend/app/components/wp-fast-table/handlers/row/click-handler.ts

@@ -1,5 +1,5 @@
 import {Injector} from '@angular/core';
-import {StateService} from '@uirouter/angularjs';
+import {StateService} from '@uirouter/core';
 import {$stateToken} from 'core-app/angular4-transition-utils';
 import {WorkPackageTableFocusService} from 'core-components/wp-fast-table/state/wp-table-focus.service';
 import {debugLog} from '../../../../helpers/debug_output';

frontend/app/components/wp-fast-table/handlers/row/double-click-handler.ts

@@ -1,5 +1,5 @@
 import {Injector} from '@angular/core';
-import {StateService} from '@uirouter/angularjs';
+import {StateService} from '@uirouter/core';
 import {$stateToken} from 'core-app/angular4-transition-utils';
 import {WorkPackageTableFocusService} from 'core-components/wp-fast-table/state/wp-table-focus.service';
 import {debugLog} from '../../../../helpers/debug_output';

frontend/app/components/wp-fast-table/handlers/row/wp-state-links-handler.ts

@@ -9,7 +9,7 @@ import {uiStateLinkClass} from '../../builders/ui-state-link-builder';
 import {WorkPackageTableSelection} from '../../state/wp-table-selection.service';
 import {WorkPackageTable} from '../../wp-fast-table';
 import {TableEventHandler} from '../table-handler-registry';
-import {StateService} from '@uirouter/angularjs';
+import {StateService} from '@uirouter/core';
 
 export class WorkPackageStateLinksHandler implements TableEventHandler {
 

frontend/app/components/wp-list/wp-list-checksum.service.ts

@@ -28,7 +28,7 @@
 
 import {QueryResource} from '../api/api-v3/hal-resources/query-resource.service';
 import {WorkPackageTablePagination} from '../wp-fast-table/wp-table-pagination';
-import {StateService} from '@uirouter/angularjs';
+import {StateService} from '@uirouter/core';
 
 
 export class WorkPackagesListChecksumService {

frontend/app/components/wp-panels/keep-tab/keep-tab.service.test.ts

@@ -27,7 +27,7 @@
 // ++
 
 import {KeepTabService} from './keep-tab.service';
-import {StateService} from '@uirouter/angularjs';
+import {StateService} from '@uirouter/core';
 
 var expect = chai.expect;
 

frontend/app/components/wp-panels/keep-tab/keep-tab.service.ts

@@ -27,7 +27,7 @@
 // ++
 
 import {ReplaySubject} from "rxjs";
-import {Transition, StateService, TransitionService} from '@uirouter/angularjs';
+import {Transition, StateService, TransitionService} from '@uirouter/core';
 export class KeepTabService {
   protected currentTab:string = 'overview';
 

frontend/app/components/wp-query-menu/wp-query-menu.directive.ts

@@ -34,7 +34,7 @@ import {
   QueryMenuEvent,
   QueryMenuService
 } from 'core-components/wp-query-menu/wp-query-menu.service';
-import {StateService, StateParams} from '@uirouter/angularjs';
+import {StateService, StateParams} from '@uirouter/core';
 
 export const QUERY_MENU_ITEM_TYPE = 'query-menu-item';
 

frontend/app/components/wp-query-select/wp-query-select.controller.ts

@@ -33,7 +33,7 @@ import {WorkPackagesListService} from '../wp-list/wp-list.service';
 import {ContextMenuService} from '../context-menus/context-menu.service';
 import {LoadingIndicatorService} from '../common/loading-indicator/loading-indicator.service';
 import {WorkPackagesListChecksumService} from '../wp-list/wp-list-checksum.service';
-import {StateService} from '@uirouter/angularjs';
+import {StateService} from '@uirouter/core';
 
 interface IAutocompleteItem {
   label:string;

frontend/app/components/wp-relations/wp-relations-hierarchy/wp-relations-hierarchy.service.ts

@@ -32,7 +32,7 @@ import {WorkPackageResourceInterface} from '../../api/api-v3/hal-resources/work-
 import {WorkPackageNotificationService} from 'core-components/wp-edit/wp-notification.service';
 import {States} from '../../states.service';
 import {WorkPackageTableRefreshService} from '../../wp-table/wp-table-refresh-request.service';
-import {StateService} from '@uirouter/angularjs';
+import {StateService} from '@uirouter/core';
 
 export class WorkPackageRelationsHierarchyService {
   constructor(protected $state:StateService,

frontend/app/components/wp-relations/wp-relations.directive.ts

@@ -34,7 +34,7 @@ import {WorkPackageResourceInterface} from '../api/api-v3/hal-resources/work-pac
 import {WorkPackageCacheService} from '../work-packages/work-package-cache.service';
 import {RelatedWorkPackagesGroup} from './wp-relations.interfaces';
 import {RelationsStateValue, WorkPackageRelationsService} from './wp-relations.service';
-import {StateService} from '@uirouter/angularjs';
+import {StateService} from '@uirouter/core';
 
 export class WorkPackageRelationsController {
   public relationGroups:RelatedWorkPackagesGroup;

frontend/app/init-app.js

@@ -27,6 +27,8 @@
 // ++
 
 // Globally exposed dependencies
+import {getUIRouter} from '@uirouter/angular-hybrid/lib/index';
+
 require('./vendors');
 
 // Styles for global dependencies
@@ -58,8 +60,13 @@ opApp
     .config([
       '$compileProvider',
       '$locationProvider',
+      '$urlServiceProvider',
       '$httpProvider',
-      function($compileProvider, $locationProvider, $httpProvider) {
+      function($compileProvider, $locationProvider, $urlServiceProvider, $httpProvider) {
+
+        // Tell UI-Router to wait to synchronize the URL (until all bootstrapping is complete)
+        console.error("DEFERRED HERE");
+        $urlServiceProvider.deferIntercept();
 
         // Disable debugInfo outside development mode
         $compileProvider.debugInfoEnabled(window.OpenProject.environment === 'development');
@@ -99,21 +106,31 @@ opApp
     ])
     .run([
       '$http',
+      'injector',
       '$rootScope',
       '$window',
       'TimezoneService',
       'ExpressionService',
       'CacheService',
       'KeyboardShortcutService',
+      '$$angularInjector',
       function($http,
                $rootScope,
                $window,
                TimezoneService,
                ExpressionService,
                CacheService,
-               KeyboardShortcutService) {
+               KeyboardShortcutService,
+               $$angularInjector) {
         $http.defaults.headers.common.Accept = 'application/json';
 
+        console.error("Log URL service");
+        const urlService = getUIRouter($$angularInjector).urlService;
+
+        // Instruct UIRouter to listen to URL changes
+        urlService.listen();
+        urlService.sync();
+
         // Set the escaping target of opening double curly braces
         // This is what returned by rails-angular-xss when it discoveres double open curly braces
         // See https://github.com/opf/rails-angular-xss for more information.

frontend/app/vendors.js

@@ -59,7 +59,7 @@ require('angular-elastic');
 require('angular-modal/modal.min.js');
 require('angular-sanitize/angular-sanitize.min.js');
 require('angular-truncate/src/truncate.js');
-require('@uirouter/angularjs/release/angular-ui-router.min.js');
+require('@uirouter/angular-hybrid');
 require('ng-file-upload/dist/ng-file-upload.min.js');
 
 // Jquery UI

frontend/package.json

@@ -33,6 +33,7 @@
     "@angular/forms": "^4.4.5",
     "@angular/platform-browser": "^4.4.5",
     "@angular/platform-browser-dynamic": "^4.4.5",
+    "@angular/router": "^4.4.5",
     "@angular/upgrade": "^4.4.5",
     "@types/angular": "^1.6.5",
     "@types/angular-mocks": "^1.5.9",
@@ -52,8 +53,7 @@
     "@types/sinon-chai": "^2.7.27",
     "@types/urijs": "^1.15.31",
     "@types/webpack-env": "^1.13.0",
-    "@uirouter/angularjs": "^1.0.13",
-    "@uirouter/core": "^5.0.14",
+    "@uirouter/angular-hybrid": "^3.1.10",
     "URIjs": "^1.14.1",
     "amdefine": "^1.0.0",
     "angular": "~1.5.9",