延迟加载组件未按预期工作

我正在尝试实现我的产品组件的延迟加载 . 该组件按预期延迟加载但当我将NavBarComponent模板包含为产品模板的子组件时，我收到以下错误：

core.js:1448 ERROR Error: Uncaught (in promise): Error: Template parse 
errors:
'app-navbar' is not a known element:
1. If 'app-navbar' is an Angular component, then verify that it is part of 
this module.
2. If 'app-navbar' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to 
the '@NgModule.schemas' of this component to suppress this message. ("[ERROR 
->]<app-navbar></app-navbar>
<div>
  <div class="container-fluid p-a-2">
"): ng:///ProductModule/ProductComponent.html@0:0
'app-footer' is not a known element:

NavBarComponent在应用程序的顶层模块AppModule中声明，如下所示，并且应该对产品组件可见：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import {FormsModule} from '@angular/forms';

import {AppRoutingModule} from './app-routing.module';
import { NavbarComponent } from './navbar/navbar.component';

@NgModule({
  declarations: [
    NavbarComponent,
  ],
  imports: [
    BrowserModule,    
     InMemoryWebApiModule.forRoot(InMemoryDataService, {delay: 0, 
passThruUnknownUrl: true}),
  ],
  providers: [DataService],
  bootstrap: [AppComponent]
})
export class AppModule { }

product.component.html :(产品模板中包含的NavBarComponent模板产生错误）

<app-navbar></app-navbar>
  <div class="container-fluid p-a-2">
  </div>
<app-footer></app-footer>

ProductModule：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import {ProductComponent} from './product.component';
import { ProductRoutingModule } from './product-routing.module';
// import {NavbarComponent} from '../navbar/navbar.component';

@NgModule({
  imports: [
    CommonModule,
    ProductRoutingModule
  ],
  declarations: [
    ProductComponent,
    // NavbarComponent
  ]
})
export class ProductModule { }

ProductRoutingModule：

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import {ProductComponent} from './product.component';

const routes: Routes = [
  {
    path: ':id',
    component: ProductComponent
  }
];

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

AppRoutingModule :(顶级应用程序路由模块）

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import {Routes, RouterModule} from '@angular/router';

import {HomeComponent} from './home/home.component';
import {AppliancesComponent} from './appliances/appliances.component';

const appRoutes: Routes = [
    {path: '', redirectTo: 'home', pathMatch: 'full'},
    {path: 'home', component: HomeComponent},
    {
        path: 'appliances',
        component: AppliancesComponent
        // loadChildren: 'app/appliances/appliances.module#AppliancesModule'
    },
    {
        path: 'product',
        loadChildren: 'app/product/product.module#ProductModule'
    },
];

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