I have an issue with Angular routing in a situation where there is an extra segment behind the domain within th eurl (https://domain/my-app/web/)

For localhost I use the following baseHref in the Angular.json "baseHref": "/test-bui/", This is meant to be used by everything but the routing (static files, relative location of main.js, vendor.js...) In Angular I define following for the routing: { provide: APP_BASE_HREF, useValue: '/' } Localhost routing works fine.

For production I use the following baseHref in the Angular.json. This is meant to be used by everything but the routing (static files, relative location of main.js, vendor.js...) "baseHref": "/my-app/web/test-bui/" In Angular I define following for the routing: { provide: APP_BASE_HREF, useValue: '/my-app/web/' }

In Angular I also use a parent route 'test-bui'.

In Angular 14 I have a situation where the routing in production modus doesn't work anymore. I migrated from Angular 12. My default route doesn't seem to work and the router outlet stays blank. When I click on a menu with router links I get the following kind of errors:

Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'test-bui/ui/hierarchical-list' Error: Cannot match any routes. URL Segment: 'test-bui/ui/hierarchical-list'

Does anybody know what I am doing wrong?

CodePudding user response：

You could try to search for breaking changes in Angular 13 and Angular 14.

I tried to find relevant changes here, https://angular.io/guide/update-to-latest-version, and found one that might be useful.

The type of Route.pathMatch is now more strict. Places that use pathMatch will likely need to be updated to have an explicit Route/Routes type so that TypeScript does not infer the type as string.

CodePudding user response：

Apparently the problem was due to the fact that we used a minified Rxjs 7 umd bundle. So we decided to bundle the rxjs javascript ourselves with webpack.

Note that this is in a scenario where CDN files are used for the third party libraries.