Question

我创建了几个自定义库，然后将其安装到另一个项目中。由public_api导出的所有库组件都可以在app.module中使用。但是，在子模块（account.module）中，没有检测到任何组件。我已经尝试将所有库放入“导出”和其他一些内容，但是我无法在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。然后，我将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 CLI6。无法在app.module的子模块中使用自定义库组件

1 个答案: