Repository navigation
Router initializer never completes if initial navigation fails #44355
Description
Which @angular/* package(s) are relevant/releated to the feature request?
router
Description
Rendering an app in SSR (using nguniversal) with an invalid URL (e.g. http://localhost:4200/electronics-spa/en/USD/Brands/Canon/c/brand_10%20or%20(1,2)=(select*from(select%20name_const(CHAR(82,88,106,99,113,78,74,70,73,118,87),1),name_const(CHAR(82,88,106,99,113,78,74,70,73,118,87),1))a)%20--%20and%201%3D1) causes the render to hang, and never release the taken resources.
The reason is that the navigation never completes on error, when the Router option initialNavigation is set to enabled.
Proposed solution
Expose RouterInitializer.
EDIT: or make the router complete the navigation on error, if that makes sense.
Alternatives considered
We came up with this workaround, but it would be nice if ɵangular_packages_router_router_h could be exposed.
import { Injectable, Injector, Provider } from '@angular/core';
import {
NavigationError,
Router,
ROUTER_CONFIGURATION,
ɵangular_packages_router_router_h as RouterInitializer,
} from '@angular/router';
import { filter, take } from 'rxjs/operators';
@Injectable()
export class CustomRouterInitializer extends RouterInitializer {
appInitializer(): Promise<any> {
const injector: Injector = (this as any).injector;
const opts = injector.get(ROUTER_CONFIGURATION);
if (
opts.initialNavigation ===
'enabled' /* for Ng11: || opts.initialNavigation === 'enabledBlocking' */
) {
let resolve: any;
const res = new Promise((r) => (resolve = r));
injector
.get(Router)
.events.pipe(
// We want to explicitly react on NavigationError event occurs just
// after the first navigation start event
take(2),
filter((event) => event instanceof NavigationError)
)
.subscribe(() => resolve(false));
super.appInitializer().then((val) => resolve(val));
return res;
}
return super.appInitializer();
}
}
export const routerFixProvider: Provider = {
provide: RouterInitializer,
useClass: CustomRouterInitializer,
};The above workaround is for ng12.
I noticed that in ng13 there's no similar private API available, unless I'm missing something.
Activity
angular-robot commentedon Dec 17, 2021
This feature request is now candidate for our backlog! In the next phase, the community has 60 days to upvote. If the request receives more than 20 upvotes, we'll move it to our consideration list.
You can find more details about the feature request process in our documentation.
angular-robot commentedon Jan 25, 2022
Just a heads up that we kicked off a community voting process for your feature request. There are 20 days until the voting process ends.
Find more details about Angular's feature request process in our documentation.
angular-robot commentedon Feb 14, 2022
Thank you for submitting your feature request! Looks like during the polling process it didn't collect a sufficient number of votes to move to the next stage.
We want to keep Angular rich and ergonomic and at the same time be mindful about its scope and learning journey. If you think your request could live outside Angular's scope, we'd encourage you to collaborate with the community on publishing it as an open source package.
You can find more details about the feature request process in our documentation.
25 remaining items
angular-automatic-lock-bot commentedon Jul 30, 2022
This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.
Read more about our automatic conversation locking policy.
This action has been performed automatically by a bot.