Angular CLI 6. 无法在 app.module 的子模块中使用自定义库组件

Question

我创建了几个自定义库，然后将其安装到另一个项目中。 public_api 导出的所有库组件都可以在 app.module 中使用。但是，在子模块 (account.module) 中，未检测到任何组件。我尝试将所有库放入“exports”和其他一些内容中，但我无法在 app.module 下面的模块中获取所需的组件。

以下示例是 z-navigation-lib，一个具有一个组件的自定义库:

公共(public)API:

export * from './lib/z-navigation-lib.service';
export * from './lib/z-navigation-lib.component';
export * from './lib/z-navigation-lib.module';

z-navigation-lib.module:

@NgModule({


imports: [
    CommonModule, RouterModule, HttpClientModule, OverlayPanelModule, ZServicesLibModule,
    InlineSVGModule.forRoot()
  ],
  declarations: [ZNavigationLibComponent, NavbarSideComponent, NavbarTopComponent, NavbarMenuComponent, NavbarMenuItem, UserControls, AlarmsOverlayComponent, TasksOverlayComponent],
  providers: [ModuleMenuService, NavigationMenuService, ZNavigationLibService],
  exports: [ZNavigationLibComponent]
})
export class ZNavigationLibModule { }

导入z-navigation-lib的项目的app-routing.component.ts文件:

import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
@NgModule({
  imports:
    [
      RouterModule.forRoot([
        { path: '', loadChildren: 'app/pages/account/account.module#AccountModule' }
      ])
    ],
  exports: [RouterModule]
})
export class AppRoutingModule {
}

导入z-navigation-lib的项目的app.module.ts:

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    FormsModule,
    ReactiveFormsModule,
    AppRoutingModule,
    HttpModule,
    ZNavigationLibModule,
    AccountModule
  ],
  providers: [],
  bootstrap: [AppComponent],
  exports: [BrowserModule, BrowserAnimationsModule,
    ZNavigationLibModule]
})
export class AppModule { }

最后，当我尝试构建 --prod 应用程序时遇到的错误:

ERROR in : Can't bind to 'menuParams' since it isn't a known property of 'z-navigation'.
1. If 'z-navigation' is an Angular component and it has 'menuParams' input, then verify that it is part of this module.
2. If 'z-navigation' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("<z-navigation [ERROR ->][menuParams]="menuParams"></z-navigation>
<z-search>
  <z-custom label="Account Short Code">
")
: 'z-navigation' is not a known element:

请记住，z 导航在 app.module 中工作正常。提前致谢!

Answer 1

发布 @Andrii Romanchak 的答案。

我无法让项目按照我在问题中想要的方式运行。我的解决方法是创建一个导入和导出 ZNavigationLibModule 的共享模块。然后，我将共享模块添加到 AppModules 导入中(导出中没有任何内容)。然后将 SharedModule 导入到 AppModule 子级的任何模块中。

快速说明:如果您在这些库中有任何服务，此方法可能会阻止您的服务成为单例。为了解决这个问题，我为 ZServicesLibModule 创建了一个 .forRoot() 方法，并避免将其导入 SharedModule。

这是我目前的应用程序模块。您可以看到我对 Shared Module 和 ZServicesLibModule 所做的操作(因为它需要为我提供单例服务):

    @NgModule({
  declarations: [
    AppComponent
  ],
  imports: [BrowserAnimationsModule,
    BrowserModule,
    FormsModule,
    ReactiveFormsModule,
    SharedModule,
    AppRoutingModule,
    HttpModule,
    ZServicesLibModule.forRoot(),
  ],
  providers: [GlobalAccessControlService],
  exports: [ZServicesLibModule],
  bootstrap: [AppComponent]
})

在 AppModule 的任何子模块中，只需以正常方式导入您需要的库作为单例，在我的例子中是这样的:

import { ZServicesLibModule } from 'z-services-lib';

@NgModule({
    imports: [ZServicesLibModule, ...]
})