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

Question

我创建了几个自定义库，然后将它们安装到另一个项目中。 public_api 导出的所有库组件都可以在 app.module 中使用。但是在子模块 (account.module) 中检测到 none 个组件。我已经尝试将所有库放入 '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 { }

最后，我在尝试构建 --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 的共享模块。然后我将 Shared 模块添加到 AppModules 导入（导出中没有任何内容）。然后将 SharedModule 导入到 AppModule 的子模块中。

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

目前这是我的 AppModule。您可以看到我对 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, ...]
})

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

Angular CLI 6. Can't use custom library components in child modules of app.module

angular-cli

angular

angular-cli-v6