Child routes with respective components in Angular 6

Question

I am trying to understand lazy loading in angular 6 ,

here is the tree of my app :

─src
 ├───app
 │   ├───components
 │   │   ├───about
 │   │   ├───clients
 │   │   ├───footer
 │   │   ├───how-it-
 │   │   ├───partner
 │   │   ├───project
 │   │   ├───team
 │   │   ├───whatwed
 │   │   └───why-cho
 │   ├───layout
 │   │   └───main-la
 │   └───shared
 ├───assets
 │   ├───charts
 │   ├───css
 │   ├───fonts
 │   ├───icon
 │   └───images
 └───environments

Here is app routing module

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule, Routes } from '@angular/router';
import { MainLayoutComponent } from './layout/main-layout/main-layout.component';
import { AboutComponent } from './components/about/about.component';
import { WhatwedoComponent } from './components/whatwedo/whatwedo.component';
import { ProjectsComponent } from './components/projects/projects.component';
import { FooterComponent } from './components/footer/footer.component';
const routes: Routes = [
  {
    path: 'home',
    component: MainLayoutComponent,
    children: [
      {
        path: '',
        redirectTo: 'home',
        pathMatch: 'full'
      },
      {
        path: 'about',
        component: AboutComponent
      },
      {
        path: 'what',
        component: WhatwedoComponent
      },
      {
        path: 'projects',
        component: ProjectsComponent
      },
      {
        path: 'contacts',
        component: FooterComponent
      }
    ]
  }
];


@NgModule({
  imports: [
    CommonModule,
    RouterModule.forChild(routes),
  ],
  declarations: [],
  exports: [
    RouterModule
]
})
export class AppRoutingModule { }

Here is the app module

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { NgStickyDirective } from 'ng-sticky';
import { RouterModule } from '@angular/router';
import { AppComponent } from './app.component';
import { MainLayoutComponent } from './layout/main-layout/main-layout.component';
import { AppRoutingModule } from './/app-routing.module';
import { MainNavDirective } from './layout/main-nav.directive';
import { AboutComponent } from './components/about/about.component';
import { WhatwedoComponent } from './components/whatwedo/whatwedo.component';
import { FooterComponent } from './components/footer/footer.component';
import { WhyChooseUsComponent } from './components/why-choose-us/why-choose-us.component';
import { TeamComponent } from './components/team/team.component';
import { ProjectsComponent } from './components/projects/projects.component';
import { ClientsComponent } from './components/clients/clients.component';
import { HowItWorksComponent } from './components/how-it-works/how-it-works.component';
import { PartnersComponent } from './components/partners/partners.component';

@NgModule({
  declarations: [
    AppComponent,
    NgStickyDirective,
    MainLayoutComponent,
    MainNavDirective,
    AboutComponent,
    WhatwedoComponent,
    FooterComponent,
    WhyChooseUsComponent,
    TeamComponent,
    ProjectsComponent,
    ClientsComponent,
    HowItWorksComponent,
    PartnersComponent
  ],
  imports: [
    BrowserModule,
    RouterModule.forRoot([]),
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

here is the main layout html for my app.

<div class="main-header">
  <nav class="main-nav" ng-sticky [offSet]="0" [addClass]="'main-sticky'" appMainNav #ref="appMainNav">
    <div class="main-nav__logo " ng-sticky [offSet]="0" [addClass]="'main-sticky__logo'">
      <img class="man-nav__logo-green" src="/assets/images/logo-white.png">
    </div>
    <div class="main-nav__toggle">
      <i class="main-nav__bars fa fa-bars" ng-sticky [offSet]="0" [addClass]="'main-bars'"></i>
    </div>
    <ul class="main-nav__list " ng-sticky [addClass]="'main-sticky-link'" [ngClass]="ref.click === true? 'Navbar__ToggleShow' :''">
      <li class="main-nav__item" routerLinkActive="active">
        <a class="main-nav__link" routerLink="/">Home</a>
      </li>
      <li class="main-nav__item" routerLinkActive="active">
        <a class="main-nav__link" routerLink="/about">About us</a>
      </li>
      <li class="main-nav__item" routerLinkActive="active">
        <a class="main-nav__link" routerLink="/what">About us</a>
      </li>
      <li class="main-nav__item" routerLinkActive="active">
        <a class="main-nav__link" routerLink="/projects">About us</a>
      </li>
      <li class="main-nav__item" routerLinkActive="active">
        <a class="main-nav__link" routerLink="/contacts">About us</a>
      </li>

    </ul>
  </nav>

  <div class="main-banner">
    <h2>We are a team of
      <strong>experts</strong>.</h2>
    <p>Founded in 2014, the BDTS Poland specializes in IT personnel outsourcing for the areas of banking, insurance, telecommunications,
      high-tech, pharmacy, logistics and many others</p>
    <a href="http://en.bdts.pl/about-us/" class="main-banner__green-button main-banner__arrow-right">Read more
      <i></i>
    </a>
    <a href="#" class="main-banner__arrow-down"></a>
  </div>
</div>

<div class="majeni-app">
  <app-whatwedo></app-whatwedo>
  <app-about></app-about>
  <app-projects></app-projects>
  <app-why-choose-us></app-why-choose-us>
  <app-team></app-team>
  <app-footer></app-footer>
</div>

<router-outlet></router-outlet>

and in app.components.html

<router-outlet></router-outlet>

unfortunately when I run ng serve my app displays white screen without any error,

what am I doing wrong with my codes? any suggestion or helpp will be helpfull

Answer 1

Your app doesn't have any default route, so Angular doesn't know which component to load on startup.

Try adding a top-level rule like:

{
   path: '',
   pathMatch: 'full',
   redirectTo: 'home'
}