NavigationError EmptyError: no elements in sequence since upgrade to 14.1

[jogelin]

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

[atscott]

Please provide a minimal reproduction of the issue in order for us to investigate.

[atscott]

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]

@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]

@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]

@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, EmptyError is specifically being caught and not rethrown so you should never get this in the NavigationError (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 the instanceof check. Does that seem possible?

[jogelin]

@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 (e instanceof EmptyError || e.name === 'EmptyError') {

If the test is the same, I think it would correctly catch the error. (I'll check tomorrow ;) )

[atscott]

@jogelin Indeed.
https://github.com/ReactiveX/rxjs/blob/bb3da37fd3f862d09f3c139f647acd694a4c4877/src/internal/util/EmptyError.ts
1160b81

[jogelin]

@atscott I applied the fix from your PR by using patch-package for now and it works!

[angular-automatic-lock-bot]

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.}