title: Angular 4 component not seen in child modules
body: <p>I am trying to get the following component to be seen in all children modules of the AppModule. Why can't I get the loader01 component without importing it in the child module when it is imported in the AppModule module. This is my component.</p>
  
  <pre><code>//app\utilities\loader01\loader01.component.ts
  
  import { Component, OnInit } from '@angular/core';
  
  @Component({
    selector: 'Loader01',
    templateUrl: './loader01.component.html',
    styleUrls: ['./loader01.component.css']
  })
  export class Loader01Component implements OnInit {
  
    constructor() { }
  
    ngOnInit() {
    }
  
  }
  </code></pre>
  
  <p>This component is part of a shared module which I have imported into the Root AppModule;</p>
  
  <pre><code>//app\utilities\utilities.module.ts
  @NgModule({
    imports: [
      CommonModule
    ],
    declarations: [Loader01Component],
    exports: [
      Loader01Component
    ]
  })
  export class UtilitiesModule { }
  </code></pre>
  
  <p>My AppModule looks like this;</p>
  
  <pre><code>//app\app.module.ts
  @NgModule({
    declarations: [
      AppComponent
    ],
    imports: [
      BrowserModule,
      FormsModule,
      HttpModule,
      AppRoutingModule,
      AppConfigModule,
      ReactiveFormsModule,
      BrowserAnimationsModule,
      ToasterModule,
      HttpInterceptorModule,
      NgbModule.forRoot(),
      UtilitiesModule
    ],
    exports: [ToasterModule],
    providers: [
      Title,
      AuthGuard,
      AuthenticationService,
      UserService,
      SweetAlertService,
      InterfaceService,
      PermissionService
    ],
    bootstrap: [AppComponent]
  })
  export class AppModule { }
  </code></pre>
  
  <p>Clearly the UtilitiesModule is included in the AppModule so I would expect it to be available in all children modules. But this is not the case.</p>
  
  <p>I have a child module UsersModule which is a child of the LayoutModule which is a child of the AppModule and a PermissionModule which is a child of the UsersModule. And I am accessing the UsersModule and PermissionModule using the router under the following urls.</p>
  
  <pre><code>#/users
  #/users/permissions
  </code></pre>
  
  <p>The PermissionModule where I want to see the Loader01Component looks like this;</p>
  
  <pre><code>//app\utilities\loader01\loader01.component.ts
  @NgModule({
    imports: [
      CommonModule,
      PermissionsRoutingModule,
      NgbModalModule,
      NgbPaginationModule
    ],
    declarations: [PermissionsComponent, EditComponent, CreateComponent]
  })
  export class PermissionsModule { }
  </code></pre>
  
  <p>The Loader01Component is not seen in this module. This component is part of the PermissionModule. The only way to see it in this module is to import the UtilitiesModule in the PermissionModule. But I don't think this is right since UtilitiesModule is already included in the AppModule which is a parent of the UsersModule which is a parent of the PermissionModule. I think Angular routing has something to do with it which I have not learnt yet.</p>
  
  <p>I am using routes to access all my children modules. Here is </p>
  
  <pre><code>//app\app-routing.module.ts
  import { AuthGuard } from './_guards/auth.guard';
  
  const appRoutes: Routes = [
      {path: '', loadChildren: './layout/layout.module#LayoutModule', canActivate: [AuthGuard]},
      { path: 'login', loadChildren: './login/login.module#LoginModule'},
      //{ path: '**', component: PageNotFoundComponent }
  ];
  
  @NgModule({
      imports: [
          RouterModule.forRoot(
              appRoutes,
              { enableTracing: true, useHash: true } // &lt;-- debugging purposes only
          )
      ],
      exports: [
          RouterModule
      ]
  })
  export class AppRoutingModule {}
  </code></pre>
  
  <p>My LayoutModule also does the same thing to include it's children modules. This is my LayoutModule routing;</p>
  
  <pre><code>//app\layout\layout-routing.module.ts
  const routes: Routes = [{ path: '', component: LayoutComponent, children: [
    //{ path: '', redirectTo: 'users', pathMatch: 'full' },
    { path: '', loadChildren: '../dashboard/dashboard.module#DashboardModule' },
    { path: 'users', loadChildren: '../users/users.module#UsersModule' }
  ]}];
  
  @NgModule({
    imports: [RouterModule.forChild(routes)],
    exports: [RouterModule]
  })
  export class LayoutRoutingModule { }
  </code></pre>
  
  <p>And this is the routing for my parent AppModule where the UtilitiesModule is included;</p>
  
  <pre><code>//app\app-routing.module.ts
  
  import { AuthGuard } from './_guards/auth.guard';
  
  const appRoutes: Routes = [
      {path: '', loadChildren: './layout/layout.module#LayoutModule', canActivate: [AuthGuard]},
      { path: 'login', loadChildren: './login/login.module#LoginModule'},
      //{ path: '**', component: PageNotFoundComponent }
  ];
  
  @NgModule({
      imports: [
          RouterModule.forRoot(
              appRoutes,
              { enableTracing: true, useHash: true } // &lt;-- debugging purposes only
          )
      ],
      exports: [
          RouterModule
      ]
  })
  export class AppRoutingModule {}
  </code></pre>