为什么忽略<router-outlet> </router-outlet>之后的Html？

Question

为什么忽略<router-outlet>之后的html？

    

    <form class="form-horizontal container" role="form">
        <div class="form-group">
            <div class="col-xs-12">
                <h3>You Can Change The type of load </h3>
                <select id="basic" class="selectpicker show-tick form-control mt30" #sel (change)='select(sel.value)'>
                    <option value="parcels" (click)="gotoload()">@ViewBag.Parcels </option>
                    <option value="palletized">@ViewBag.Palletized</option>
                    <option value="bulk">@ViewBag.Bulk</option>
                    <option value="container">@ViewBag.Container</option>
                    <option value="furniture">@ViewBag.Furniture</option>
                    <option value="car">@ViewBag.Car</option>
                    <option value="boat">@ViewBag.Boat</option>
                    <option value="equipment">@ViewBag.Equipment</option>
                    <option value="animals">@ViewBag.Animals</option>
                    <option value="others">@ViewBag.Others</option>
                    <option value="movingAHouse">@ViewBag.MovingAHouse</option>
                </select>
            </div>
        </div>
    </form>

    <form *ngIf="active" (ngSubmit)="onSubmit()" #heroForm="ngForm" novalidate>
        <router-outlet></router-outlet>
        <div class="">
            <button [disabled]="!isValidLoad()" type="button" name="button" class="Awesome-btn hvr-bounce-to-right col-xs-12" (click)="onSubmit()">Continue My Shipping</button>
        </div>
    </form>

在另一个模块中路由：

const loadsRoutes: Routes = [
 { path: '', component: LoadsComponent },
  {
    path: 'type',
    component: LoadtypelistComponent,
    children: [

     { path: 'parcels', component: ParcelsComponent }

    ]
  }
];

当路由到'ParcelsComponent'时会出现错误：

  

找不到加载'ParcelsComponent'

的主要插座

请帮助吗？