title: How can I allow unauthorized access to a child route whose parent has an AuthGuard in Angular 4?
body: <p>My Angular 4 app has parent routes set up in the file <code>app.module.ts</code> using lazy loading (<code>loadChildren</code>). Some routes require authentication (using <code>canActivate</code>) and some do not:</p>
  
  <pre class="lang-js prettyprint-override"><code>// app.module.ts
  const routes: Routes = [
    // Paths that require authentication
    {
      path: '',
      children: [
        { path: 'admin', loadChildren: './admin/admin.module#AdminModule' },
        { path: 'customer-locator', loadChildren: './customer-locator/customer-locator.module#CustomerLocatorModule' }
      ],
      canActivate: [AuthGuard]
    },
    // Paths that do not require authentication
    { 
      path: 'login', 
      component: LoginComponent 
    }
  ];
  </code></pre>
  
  <p>Child routes are set up inside each corresponding module. For example, for child routes in <code>CustomerLocatorModule</code>, they have been placed in <code>customer-locator.module.ts</code>:</p>
  
  <pre class="lang-js prettyprint-override"><code>// customer-locator.module.ts
  const routes: Routes = [
    {  // REQUIRES AUTHENTICATION
      path: '',
      component: CustomerLocatorComponent
    },
    {  // SHOULD NOT REQUIRE AUTHENTICATION
      path: 'edit-customer/:customerId',
      component: EditCustomerComponent
    }
  ]
  </code></pre>
  
  <p>As it is currently set up, all child routes under <code>path: ''</code> require authentication to be accessed.</p>
  
  <p>Is it possible for a child route (in this case, the one pointing to <code>EditCustomerComponent</code>) to NOT require authentication, given that its parent route (<code>customer-locator</code>) does require authentication?</p>