onError not redirecting

[Vortilion]

I am migrating from ui-router 1 (AngularJS) to ui-router for Angular 12. In the old application we were catching transition-errors and redirecting to a proprietary 401-page via

$transitions.onError({}, function(transition) {
        if(transition.$from.name !== transition.$to.name) {
            if (transition.$from.url !== 'home' && transition.$to.url !== 'login') {
                $state.go('layout.code401');
            }
        }
    });

It seems that in the new version with angular 12 I have to use the routerConfig-Function to config something similar:

export function routerConfigFn(router: UIRouter, injector: Injector) {
    const transitionService: TransitionService = router.transitionService;
    const titleService = injector.get(Title);

    errorHook(transitionService);

and

export function errorHook(transitionService: TransitionService) {
    transitionService.onError({}, (transition) => {
        const stateService: StateService = transition.router.stateService;

        let transitionRejection: Rejection = transition.error();
        console.debug('transitionRejection: ', transitionRejection);

        return stateService.target('layout.code401', undefined, { location: true });
       
    });
}

What I noticed is that there isnt a stateService.go anymore but instead a stateService.target. For some reason this onError-Redirect isnt triggered anymore. The transition DOES error (I enabled tracing and console-debugging) but the redirect is simply ignored.

Another weird issue with the new ui-router:

For some reason I'm always getting a transitionRejection

Transition #1-0: <- Rejected "Transition#1( 'layout.home'{} -> 'layout.secure.**'{"remainder":"undefined"} )", reason: Transition Rejection($id: 0 type: 2, message: The transition has been superseded by a different transition, detail: 'layout.secure.home'{})

when transitioning from one state to a lazy-loaded future state (in my case

layout.home -> layout.secure.home 

where layout.secure.** is the futureState. Why is that? Is that common behaviour of ui-router?

States:

export const secureFutureState: Ng2StateDeclaration = {
    name: 'layout.secure.**',
    url: '/secure',
    loadChildren: () => import(/* webpackChunkName: "secure/secure" */ 
'../secure/secure.module').then(m => m.SecureModule)
};

export const secureState: Ng2StateDeclaration = {
    name: 'layout.secure',
    url: '/secure',
    abstract: true,
    component: SecurePageComponent
}

export const secureStartseiteState: Ng2StateDeclaration = {
    name: 'layout.secure.home',
    url: '/startseite',
    component: StartseitePageComponent
};