title: Is there any way to give a base URL to different sub modules that are lazy loaded in Angular
body: <p>I have a main angular application and in there there are different modules lazy loaded depending on the route</p>
  
  <pre><code>    {
          path: 'url1',
          pathMatch: 'prefix',
          loadChildren: './url1/url1.module#Module1'
      },
      {
          path: 'url1',
          pathMatch: 'prefix',
          loadChildren: './url1/url1.module#Module2'
      },
  </code></pre>
  
  <p>But inside the modules I have routerLinks in the htmls that navigates to different paths in the module selected but it does not consider the url1 or url2 as the base URL </p>
  
  <p>I tried adding </p>
  
  <pre><code> providers: [
      { provide: APP_BASE_HREF, useValue: '/url1' }
    ],
  </code></pre>
  
  <p>but for every URL, it does not append the url1 or url2 as base for every route link but it didnt work for me. how can I add the base url1 or url2 depending on the url when routing inside the modules like </p>
  
  <p>so basically /subroute1/subroute2 should be as url1/subroute1/subroute2 since its giving an error </p>
  
  <blockquote>
    <p>Error: Uncaught (in promise): Error: Cannot match any routes. URL
    Segment /subroute1/subroute2 </p>
  </blockquote>
  
  <p>example routing for sub modules</p>
  
  <pre><code>   { 
          path: '',
          component: Module1MainComponent,
          children: [
              {path: 'reports', component: ReportsComponent}
          ]
      }
  </code></pre>