fix(router): provide more actionable error message when route is not matched in production mode (#53523)

alan-agius4 · alxhub · commit e750e4edcfe8 · 2023-12-12T14:31:25.000-08:00
Prior to this commit when a route is not matched and the application was running in production mode an `[Error]: NG04002` was logged in the console. This however, is not actionable when the application is running on the server where there can be multiple pages being rendered at the same time. Now we change this to also log the route example: `[Error]: NG04002: 'products/Jeep'`. Closes #53522 PR Close #53523
diff --git a/packages/router/src/apply_redirects.ts b/packages/router/src/apply_redirects.ts
@@ -58,13 +58,6 @@ export function canLoadFails(route: Route): Observable<LoadedRouterConfig> {
 export class ApplyRedirects {
   constructor(private urlSerializer: UrlSerializer, private urlTree: UrlTree) {}
 
-  noMatchError(e: NoMatch): any {
-    return new RuntimeError(
-        RuntimeErrorCode.NO_MATCH,
-        (typeof ngDevMode === 'undefined' || ngDevMode) &&
-            `Cannot match any routes. URL Segment: '${e.segmentGroup}'`);
-  }
-
   lineralizeSegments(route: Route, urlTree: UrlTree): Observable<UrlSegment[]> {
     let res: UrlSegment[] = [];
     let c = urlTree.root;
diff --git a/packages/router/src/recognize.ts b/packages/router/src/recognize.ts
@@ -56,11 +56,12 @@ export class Recognizer {
       private paramsInheritanceStrategy: ParamsInheritanceStrategy,
       private readonly urlSerializer: UrlSerializer) {}
 
-  private noMatchError(e: NoMatch): any {
+  private noMatchError(e: NoMatch): RuntimeError<RuntimeErrorCode.NO_MATCH> {
     return new RuntimeError(
         RuntimeErrorCode.NO_MATCH,
-        (typeof ngDevMode === 'undefined' || ngDevMode) &&
-            `Cannot match any routes. URL Segment: '${e.segmentGroup}'`);
+        (typeof ngDevMode === 'undefined' || ngDevMode) ?
+            `Cannot match any routes. URL Segment: '${e.segmentGroup}'` :
+            `'${e.segmentGroup}'`);
   }
 
   recognize(): Observable<{state: RouterStateSnapshot, tree: UrlTree}> {
