title: the angular default route give empty page rather than going to componant
body: <p>by application contain app component .html</p>
  <pre><code>&lt;router-outlet&gt;&lt;/router-outlet&gt;
  </code></pre>
  <p>with router</p>
  <pre><code>const routes: Routes = [
  
   {
   path: '',
   component: LandingPageComponent,
   canActivate: [AuthGuard],
   children: [
  
    {
      path: 'dashboard',
      canActivate: [AuthGuard],
      component: DashboardComponent
    },
    {
      path: '',
      canActivate: [AuthGuard],
      component: DashboardComponent,
    },
  
  ]
   },
   {
    path: 'login',
    component: LoginComponent
   },
   {
    path: '**',
    redirectTo: 'dashboard'
   }
  
  
   ];
  </code></pre>
  <p>the landing page code</p>
  <pre><code>   &lt;!-- side bar menu --&gt;
   &lt;sidebar #sideBar id=&quot;sideBar&quot;&gt;&lt;/sidebar&gt;
     &lt;!-- /side bar menu --&gt;
    &lt;!-- top navigation --&gt;
     &lt;topbar&gt;&lt;/topbar&gt;
     &lt;!-- /top navigation --&gt;
  
   &lt;!-- page content --&gt;
     &lt;router-outlet&gt;&lt;/router-outlet&gt;
    &lt;!-- /page content --&gt;
  
   &lt;!-- footer content --&gt;
    &lt;bottomfooter&gt;&lt;/bottomfooter&gt;
     &lt;!-- /footer content --&gt;
  </code></pre>
  <p>my guard</p>
  <pre><code>    @Injectable({ providedIn: 'root' })
      export class AuthGuard implements CanActivate {
        constructor(private router: Router, private authService: AuthService) { }
        canActivate() {
          return this.authService.user.pipe(
            map(user =&gt; {
              if (user) return true;
  
              this.router.navigate(['/login']);
              return false;
            }));
        }
      }
  </code></pre>
  <p>every thing is working fine except the defualt route it suppose direct to the dashboard but it give me empty page with the side and top nav bar</p>
  <p>any suggestion how can i solve this problem</p>