I’ve ran into an issue that I didn’t know about.  At first, I thought this particular issue is a bug.  It’s not but a feature of Angular 4.

The Problem

Lazy loaded components are unable to see parent-components that are already loaded.

Solution

We need to create a module that houses all the required components we need and import them in modules that require said components.

Loader.module.ts

Create a LoaderModule that has the components you need on lazy loaded components.

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

import { SidebarComponent } from "./sidebar.component";

@NgModule({
    imports: [RouterModule],
    exports: [SidebarComponent],
    declarations: [SidebarComponent],
    providers: [],
})

export class LoaderModule { }

Update lazy.module.ts

Update your lazy loading module to add the following:

import { NgModule } from '@angular/core';
import { LoaderModule } from "./loader.module";

@NgModule({
    declarations: [],
    imports: [LoaderModule]
})
export class LazyModule {}

Whenever you need to use the shared components from LoaderModule, just import it into the module files that require the components.

Sources: StackOverflow