title: Custom Route Name Angular
body: <p>Currently, my route is</p>
  <pre><code> Routes = [
     {
  path: '',
  component: MainLayoutComponent,
  children: [ 
    { path: 'activity', component: ActivityListComponent, pathMatch: 'full', canActivate: [AuthGuard] },
    { path: 'userReport', component: ReportsComponent, pathMatch: 'full', canActivate: [AuthGuard] }
  ]
  }]
  </code></pre>
  <p>I want to change the URL <strong>http://localhost:1234/userReport</strong>     to <strong>http://localhost:1234/ReportSection</strong></p>
  <p>I have done to do the same</p>
  <pre><code> {path: &quot;userReport&quot;, component: ReportsComponent, canActivate: [AuthGuard],data: { routeName: &quot;ReportSection&quot; }}
  </code></pre>
  <p>But it didn't work.</p>
  <p>Then I tried this</p>
  <pre><code>{path: &quot;ReportSection&quot;, component: ReportsComponent,pathMatch: 'full', canActivate:   
  [AuthGuard] }
  </code></pre>
  <p>And this gives me an error <strong>Cannot match any routes. URL Segment: 'userReport'</strong></p>
  <p>Is there any other way to change the URL name?</p>