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-导航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 { }

最后，当我尝试构建时，我得到的错误 - 生成应用程序：

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-navigation在app.module中运行正常。提前致谢！

Answer 1

张贴@Andrii Romanchak的答案。

我不能按照我想要的方式使项目工作。我的解决方法是创建一个导入和导出ZNavigationLibModule的共享模块。然后我将共享模块添加到AppModules导入（导出中没有任何内容）。然后将SharedModule导入任何AppModule的子模块。

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

这是我目前的AppModule。您可以看到我使用共享模块和服务子模块做了什么（因为它需要给我单例服务）：

    @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, ...]
})