title: Lazy loading in Angular 6 resulting in Cannot match any routes
body: <p>I am trying to achieve lazy loading in my Angular app.
  Here are my routes:</p>
  
  <p><strong>app-routing.module.ts</strong></p>
  
  <pre><code>const routes: Routes = [
    {
      path: '',
      loadChildren: './customer/customer.module#CustomerModule',
      pathMatch: 'full'
    }
  ];
  </code></pre>
  
  <p>and in module:</p>
  
  <pre><code>  imports: [RouterModule.forRoot(routes)],
  </code></pre>
  
  <p><strong>customer-routing.module.ts</strong></p>
  
  <pre><code>export const routes: Routes = [
    { path: '', component: ComparePageComponent },
    { path: 'funds', component: FundSelectionComponent },
    { path: ':service', component: ComparePageComponent },
    { path: '**', component: PageNotFoundComponent },
  ];
  </code></pre>
  
  <p>and in module :</p>
  
  <pre><code>imports: [
      RouterModule.forChild(routes)
    ],
  </code></pre>
  
  <p>Now, I have a logic that will load the <code>/profile</code> page when there are no path params i.e. when the url is '' (<code>this._router.navigate(['', 'profile'])</code>) for which I have already defined a path in my customer module <code>{ path: ':service', component: ComparePageComponent }</code></p>
  
  <p>But, when the app runs, it results in the following error:</p>
  
  <blockquote>
    <p>ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL
    Segment: 'profile' Error: Cannot match any routes. URL Segment:
    'profile'
        at ApplyRedirects.push../node_modules/@angular/router/fesm5/router.js.ApplyRedirect</p>
  </blockquote>
  
  <p>Not really sure where I am going wrong.</p>