From f85a120b7b9b3be75a85b056a44e375834a6f42b Mon Sep 17 00:00:00 2001
From: George Kalpakas <kalpakas.g@gmail.com>
Date: Mon, 7 Jun 2021 20:44:08 +0300
Subject: [PATCH] docs(router): fix code-example headers (#42507)

Previously, the code-examples headers used in the
"Creating custom route matches" tutorial contained the name of the
example directory (`routing-with-urlmatcher`). This was confusing,
because the user was previously instructed to create an app named
`angular-custom-route-match` and switch to that directory.

This commit fixes it by removing the root directory name from the
headers, thus leaving the path of the file relative to the current
working directory. This also aligns with code-examples in other guides.

PR Close #42507
---
 aio/content/guide/routing-with-urlmatcher.md | 22 ++++++++++----------
 1 file changed, 11 insertions(+), 11 deletions(-)

diff --git a/aio/content/guide/routing-with-urlmatcher.md b/aio/content/guide/routing-with-urlmatcher.md
index 39fcf49612..6951e16536 100644
--- a/aio/content/guide/routing-with-urlmatcher.md
+++ b/aio/content/guide/routing-with-urlmatcher.md
@@ -48,12 +48,12 @@ Using the Angular CLI, create a new application, _angular-custom-route-match_. I
 1. In your code editor, locate the file, `profile.component.html` and replace
    the placeholder content with the following HTML.
 
-   <code-example path="routing-with-urlmatcher/src/app/profile/profile.component.html" header="routing-with-urlmatcher/src/app/profile/profile.component.html"></code-example>
+   <code-example path="routing-with-urlmatcher/src/app/profile/profile.component.html" header="src/app/profile/profile.component.html"></code-example>
 
 1. In your code editor, locate the file, `app.component.html` and replace
    the placeholder content with the following HTML.
-    
-   <code-example path="routing-with-urlmatcher/src/app/app.component.html" header="routing-with-urlmatcher/src/app/app.component.html"></code-example>
+
+   <code-example path="routing-with-urlmatcher/src/app/app.component.html" header="src/app/app.component.html"></code-example>
 
 ## Configure your routes for your application
 
@@ -63,21 +63,21 @@ With your application framework in place, you next need to add routing capabilit
 
 1. Add an `import` statement for Angular's `RouterModule` and `UrlMatcher`.
 
-   <code-example path="routing-with-urlmatcher/src/app/app.module.ts" header="routing-with-urlmatcher/src/app/app.module.ts" region="import"></code-example>
+   <code-example path="routing-with-urlmatcher/src/app/app.module.ts" header="src/app/app.module.ts" region="import"></code-example>
 
 1. In the imports array, add a `RouterModule.forRoot([])` statement.
 
-   <code-example path="routing-with-urlmatcher/src/app/app.module.ts" header="routing-with-urlmatcher/src/app/app.module.ts" region="imports-array"></code-example>
+   <code-example path="routing-with-urlmatcher/src/app/app.module.ts" header="src/app/app.module.ts" region="imports-array"></code-example>
 
 1. Define the custom route matcher by adding the following code to the `RouterModule.forRoot()` statement.
 
-   <code-example path="routing-with-urlmatcher/src/app/app.module.ts" header="routing-with-urlmatcher/src/app/app.module.ts" region="matcher"></code-example>
+   <code-example path="routing-with-urlmatcher/src/app/app.module.ts" header="src/app/app.module.ts" region="matcher"></code-example>
 
 This custom matcher is a function that performs the following tasks:
 
 * The matcher verifies that the array contains only one segment.
 * The matcher employs a regular expression to ensure that the format of the username is a match.
-* If there is a match, the function returns the entire URL, defining a `username` route parameter as a substring of the path. 
+* If there is a match, the function returns the entire URL, defining a `username` route parameter as a substring of the path.
 * If there isn't a match, the function returns null and the router continues to look for other routes that match the URL.
 
 <div class="is-helpful">
@@ -94,19 +94,19 @@ With the custom matcher in place, you now need to subscribe to the route paramet
 
 1. Add an `import` statement for Angular's `ActivatedRoute` and `ParamMap`.
 
-   <code-example path="routing-with-urlmatcher/src/app/profile/profile.component.ts" header="routing-with-urlmatcher/src/app/profile/profile.component.ts" region="activated-route-and-parammap"></code-example>
+   <code-example path="routing-with-urlmatcher/src/app/profile/profile.component.ts" header="src/app/profile/profile.component.ts" region="activated-route-and-parammap"></code-example>
 
 1. Add an `import` statement for RxJS `map`.
 
-   <code-example path="routing-with-urlmatcher/src/app/profile/profile.component.ts" header="routing-with-urlmatcher/src/app/profile/profile.component.ts" region="rxjs-map"></code-example>
+   <code-example path="routing-with-urlmatcher/src/app/profile/profile.component.ts" header="src/app/profile/profile.component.ts" region="rxjs-map"></code-example>
 
 1. Subscribe to the `username` route parameter.
 
-   <code-example path="routing-with-urlmatcher/src/app/profile/profile.component.ts" header="routing-with-urlmatcher/src/app/profile/profile.component.ts" region="subscribe"></code-example>
+   <code-example path="routing-with-urlmatcher/src/app/profile/profile.component.ts" header="src/app/profile/profile.component.ts" region="subscribe"></code-example>
 
 1. Inject the `ActivatedRoute` into the component's constructor.
 
-   <code-example path="routing-with-urlmatcher/src/app/profile/profile.component.ts" header="routing-with-urlmatcher/src/app/profile/profile.component.ts" region="activatedroute"></code-example>
+   <code-example path="routing-with-urlmatcher/src/app/profile/profile.component.ts" header="src/app/profile/profile.component.ts" region="activatedroute"></code-example>
 
 ## Test your custom URL matcher