Angular CLI 6. Невозможно использовать пользовательские библиотечные компоненты в дочерних модулях app.module - PullRequest
Новая
       9

Angular CLI 6. Невозможно использовать пользовательские библиотечные компоненты в дочерних модулях app.module

0 голосов
/ 26 октября 2018

Я создал несколько пользовательских библиотек, которые затем установил в другой проект.Все библиотечные компоненты, экспортируемые 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 { }

Файл app-routing.component.ts файлапроект, импортирующий z-navigation-lib: 

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

app.module.ts проекта, импортирующего z-navigation-lib: 

@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.Заранее спасибо!

1 Ответ

0 голосов
/ 26 февраля 2019

Отправка ответа для @Andrii Romanchak.

Я не смог заставить проект работать так, как мне хотелось, в вопросе.Мой обходной путь - создать общий модуль, который импортировал и экспортировал ZNavigationLibModule.Затем я добавил модуль Shared в импорт AppModules (ничего в экспорте).Затем импортируйте SharedModule в любой модуль, который является дочерним по отношению к AppModule.

Краткое примечание. Если у вас есть какие-либо службы в этих библиотеках, этот метод может помешать вашим службам быть одиночными.Чтобы противостоять этому, я создал метод .forRoot () для ZServicesLibModule и избежал его импорта в 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, ...]
})
...