Repository navigation
NavigationError EmptyError: no elements in sequence since upgrade to 14.1 #47089
Description
Which @angular/* package(s) are the source of the bug?
router
Is this a regression?
Yes
Description
Hello,
Since the upgrade from Angular 14.0.6 to 14.1.1, all of your routing configurations are broken because rxjs is throwing an EmptyError when processing the routing.
After some searching, I found that it is related to the commit 72e6a94 from @atscott
It seems that the observable processSegment is closed before emitting a value:
processSegment(injector, routes, segmentGroup, segments, outlet) {
return from(routes).pipe(concatMap(r => {
return this.processSegmentAgainstRoute(r._injector ?? injector, r, segmentGroup, segments, outlet);
}), first((x) => !!x), catchError(e => {
// THE ERROR IS THROWN HERE
if (e instanceof EmptyError) {
if (noLeftoversInUrl(segmentGroup, segments, outlet)) {
return of([]);
}
return of(null);
}
throw e;
}));
}I suspect the first operator above.
My routing configuration:
{
path: ':brandId',
children: [
{ path: '', redirectTo: 'admin', pathMatch: 'full' },
{
path: 'admin',
children: [
{
path: '',
redirectTo: 'orga',
pathMatch: 'full',
},
{
path: 'orga',
component: OrganizationComponent,
children: [
{
path: 'test',
component: DetailsComponent,
},
],
},
],
},
],
},
WHen I remove the last config:
children: [
{
path: 'test',
component: DetailsComponent,
},
],
It works !!
Any ideas?
Please provide a link to a minimal reproduction of the bug
No response
Please provide the exception or error you saw
No response
Please provide the environment you discovered this bug in (run ng version)
Angular CLI: 14.1.1
Node: 16.15.0
Package Manager: yarn 1.22.15
OS: darwin x64
Angular: 14.1.1
... animations, cdk, cli, common, compiler, compiler-cli, core
... forms, language-service, material, platform-browser
... platform-browser-dynamic, router
Package Version
---------------------------------------------------------
@angular-devkit/architect 0.1401.1
@angular-devkit/build-angular 14.1.1
@angular-devkit/core 14.1.1
@angular-devkit/schematics 14.1.1
@schematics/angular 14.1.1
rxjs 7.5.6
typescript 4.7.4
webpack 5.73.0
the project is also using Nrwl/Nx:
Node : 16.15.0
OS : darwin x64
yarn : 1.22.15
nx : 14.5.4
@nrwl/angular : 14.5.4
@nrwl/cypress : 14.5.4
@nrwl/detox : Not Found
@nrwl/devkit : 14.5.4
@nrwl/eslint-plugin-nx : 14.5.4
@nrwl/express : Not Found
@nrwl/jest : 14.5.4
@nrwl/js : 14.5.4
@nrwl/linter : 14.5.4
@nrwl/nest : Not Found
@nrwl/next : Not Found
@nrwl/node : 14.5.4
@nrwl/nx-cloud : Not Found
@nrwl/nx-plugin : 14.5.4
@nrwl/react : Not Found
@nrwl/react-native : Not Found
@nrwl/schematics : Not Found
@nrwl/storybook : 14.5.4
@nrwl/web : 14.5.4
@nrwl/workspace : 14.5.4
typescript : 4.7.4
---------------------------------------
Community plugins:
@auth0/auth0-angular: 1.10.0
@cumul.io/ngx-cumulio-dashboard: 3.0.2
@ngneat/edit-in-place: 1.6.1
@ngneat/transloco: 4.1.1
@ngrx/component: 14.0.2
@ngrx/component-store: 14.0.2
ng2-charts: 3.0.11
single-spa-angular: 7.1.0
@compodoc/compodoc: 1.1.19
@ngneat/spectator: 11.1.0
@storybook/angular: 6.5.9
@twittwer/compodoc: 1.8.0
Anything else?
No response
Activity
atscott commentedon Aug 9, 2022
Please provide a minimal reproduction of the issue in order for us to investigate.
atscott commentedon Aug 9, 2022
Given the information you've provided, here's a reproduction showing the mentioned config works: https://stackblitz.com/edit/angular-ivy-htfvw6?file=src%2Fmain.ts,src%2Fstyles.css
jogelin commentedon Aug 9, 2022
@atscott I will try to reproduce this error. It is failing in a big micro frontend project so not that easy to reconfigure.
But for sure since the upgrade, the routing isn't working in the same way. When I downgrade, it works again.
atscott commentedon Aug 9, 2022
@jogelin I'm certainly not disputing that you are encountering an issue. That said, we can't do any investigation without a way to reproduce it.
atscott commentedon Aug 9, 2022
@jogelin You mentioned you're using a micro frontend. In addition, your issue description mentions "NavigationError EmptyError". If you look at that bit of code,
EmptyErroris specifically being caught and not rethrown so you should never get this in theNavigationError(at least from this code location). This leads me to believe there might be some sort of discrepancy in the rxjs version being used in the error creation and theinstanceofcheck. Does that seem possible?jogelin commentedon Aug 9, 2022
@atscott Good point,
when I check this part, the error is re-thrown:
Below, is my console error, this is why I specified
NavigationError:I noticed that sometimes in the same file, we are use this approach:
If the test is the same, I think it would correctly catch the error. (I'll check tomorrow ;) )
atscott commentedon Aug 9, 2022
@jogelin Indeed.
https://github.com/ReactiveX/rxjs/blob/bb3da37fd3f862d09f3c139f647acd694a4c4877/src/internal/util/EmptyError.ts
1160b81
jogelin commentedon Aug 10, 2022
@atscott I applied the fix from your PR by using
patch-packagefor now and it works!fix(router): Fix route recognition behavior with some versions of rxjs (
fix(router): Fix route recognition behavior with some versions of rxjs (
angular-automatic-lock-bot commentedon Sep 10, 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.