Javascript 在子模块中看不到角度4组件

我试图在AppModule的所有子模块中看到以下组件。为什么在AppModule模块中导入loader01组件时，我不能在不将其导入子模块的情况下获取它。这是我的组件

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

}

这个组件是我导入根AppModule的共享模块的一部分

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

我的AppModule看起来像这样

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

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

显然，UtilitiesModule包含在AppModule中，因此我希望它在所有子模块中都可用。但事实并非如此

---

我有一个子模块UsersModule，它是LayoutModule的子模块，它是AppModule的子模块，还有一个子模块PermissionModule，它是UsersModule的子模块。我使用路由器在以下URL下访问UsersModule和PermissionModule

#/users
#/users/permissions

我希望看到Loader01组件的PermissionModule如下所示

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

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

Loader01组件在此模块中不可见。此组件是PermissionModule的一部分。在此模块中查看它的唯一方法是在PermissionModule中导入Utilities模块。但我认为这是不对的，因为UtilitiesModule已经包含在AppModule中，AppModule是UsersModule的父级，UsersModule是PermissionModule的父级。我认为角度路由与此有关，我还没有学会

我正在使用路由访问我的所有子模块。这是

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

这是我的父AppModule的路由，其中包括UtilitiesModule

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

//app\app-routing.module.ts
从“/_guards/auth.guard”导入{AuthGuard}；
施工许可：路线=[
{path:''，loadChildren:'./layout/layout.module#LayoutModule'，可以激活：[AuthGuard]}，
{path:'login'，loadChildren:'./login/login.module#LoginModule'}，
//{路径：'**'，组件：PageNotFoundComponent}
];
@NGD模块({
进口：[
RouterModule.forRoot(
批准，
{enableTracing:true，useHash:true}/
提供程序
以您想要的方式工作，但是
组件
s的情况并非如此

由于您有一个
utilities模块
声明您的
Loader01组件
并将其导出，因此您必须在要使用
Loader01组件的每个模块中导入
utilities模块

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

一个重要注意事项：由于角度依赖注入，请不要从您的
实用程序模块
提供任何服务。延迟加载的模块会获得自己的服务实例。
您可以在此处阅读更多信息：
“LayoutModule，它是AppModule的子级”我没有看到在您的
AppModule
中导入的
LayoutModule
，我已经使用路由包含了LayoutModule；{path:''，loadChildren:'./layout/layout.module#LayoutModule'，canActivate:[AuthGuard]}在这种情况下，我不确定LayoutModule的范围。如果它是独立于容器模块（AppRoutingModule）加载的我想你也需要在你的延迟加载模块中导入SharedModule。例如：是的，当我在延迟加载模块中包含SharedModule时，它可以工作。这是存档的唯一方法？我的意思是我必须在整个应用程序中为我的所有延迟加载模块执行此操作？似乎要为每个模块执行此操作需要做很多工作。我不能只做一个吗它无处不在？我认为它在AppModule中可用，它将自动加载到延迟加载的模块中。这正是OP在
实用程序模块中所做的，组件不在
导入
数组中，它们应该在
声明中
抱歉，是的，我修复了它。感谢Show我可以在确保Loader01Component html始终位于任何模块中，而无需反复导入。有点像全局组件或指令，我可以在任何地方使用。恐怕这是不可能的。