Composant angulaire 4 non visible dans les modules enfants

Question

J'essaie de voir le composant suivant dans tous les modules enfants de l'AppModule. Pourquoi ne puis-je pas obtenir le composant loader01 sans l'importer dans le module enfant lorsqu'il est importé dans le module AppModule. C'est ma composante.

//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() { 
    } 

} 

Ce composant fait partie d'un module partagé que j'ai importé dans le Root AppModule;

//app\utilities\utilities.module.ts 
@NgModule({ 
    imports: [ 
    CommonModule 
    ], 
    declarations: [Loader01Component], 
    exports: [ 
    Loader01Component 
    ] 
}) 
export class UtilitiesModule { } 

Mon AppModule ressemble à ceci;

//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 { } 

Il est clair que le UtilitiesModule est inclus dans le AppModule donc je pense qu'il soit disponible dans tous les modules enfants. Mais ce n'est pas le cas.

J'ai un module enfant UsersModule qui est un enfant du LayoutModule qui est un enfant de l'AppModule et un PermissionModule qui est un enfant du UsersModule. Et j'accède à UsersModule et PermissionModule utilisant le routeur sous les urls suivants.

#/users 
#/users/permissions 

Le PermissionModule où je veux voir le Loader01Component ressemble à ceci;

//app\utilities\loader01\loader01.component.ts 
@NgModule({ 
    imports: [ 
    CommonModule, 
    PermissionsRoutingModule, 
    NgbModalModule, 
    NgbPaginationModule 
    ], 
    declarations: [PermissionsComponent, EditComponent, CreateComponent] 
}) 
export class PermissionsModule { } 

Le composant Loader01 n'apparaît pas dans ce module. Ce composant fait partie de PermissionModule. La seule façon de le voir dans ce module est d'importer le UtilitiesModule dans le PermissionModule. Mais je ne pense pas que ce soit correct puisque UtilitiesModule est déjà inclus dans l'AppModule qui est un parent du UsersModule qui est un parent du PermissionModule. Je pense que le routage angulaire a quelque chose à voir avec ce que je n'ai pas encore appris. J'utilise des routes pour accéder à tous mes modules enfants. Voici

//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 } // <-- debugging purposes only 
     ) 
    ], 
    exports: [ 
     RouterModule 
    ] 
}) 
export class AppRoutingModule {} 

Mon LayoutModule fait également la même chose pour inclure ses modules enfants. C'est mon routage LayoutModule;

//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 { } 

Et c'est le routage pour mon AppModule parent où le UtilitiesModule est inclus;

//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 } // <-- debugging purposes only 
     ) 
    ], 
    exports: [ 
     RouterModule 
    ] 
}) 
export class AppRoutingModule {} 

Answer 1

Providers travailler comme vous voulez, mais ce n'est pas le cas avec Component s.

Puisque vous avez un UtilitiesModule qui déclare votre Loader01Component et l'exporter, vous devez importer UtilitiesModule dans chaque module dans lequel vous souhaitez utiliser Loader01Component

@NgModule({ 
    imports: [UtilitiesModule] 
}) 
export class UserModule 

Une note importante: Ne fournit pas un service de votre UtilitiesModule en raison de l'injection de dépendance angulaire. Les modules chargés paresseux obtiennent leurs propres instances de services. Vous pouvez en lire plus à ici: https://angular.io/guide/ngmodule-faq#why-is-it-bad-if-sharedmodule-provides-a-service-to-a-lazy-loaded-module