Угловой пакет с использованием собственного сервиса внутри компонента

Я создаю угловую библиотеку для компонентов, совместно используемых несколькими приложениями. Я сталкиваюсь с проблемами при использовании службы внутри библиотеки внутри компонента из библиотеки.

Служба предназначена для внедрения в корень приложения (не в библиотеку) и может использоваться во всем приложении.

В этом сценарии мы смотрим на ToastService а также UIToastComponent, UIToastComponent экспортируется из UIToastModule,

Затем приложение импортирует UIToastModule внутри приложения AppModuleгде также обеспечивает ToastService,

<ui-toast></ui-toast> тег сидит в приложении app.component.html файл.

Идея заключается в том, что в любой компонент внутри приложения разработчик может внедрить ToastService и позвонить this.toastService.success('Great Success!'), который подобрал UIToastComponent и показывает тост.

constructor для UIToastComponent не могу подобрать сервис, и во время выполнения у меня возникает следующая ошибка:

Uncaught ReferenceError: ToastService is not defined
at UIToastComponent.ctorParameters (ngx-example-library.js:197)
at ReflectionCapabilities._ownParameters (core.js:2060)
at ReflectionCapabilities.parameters (core.js:2095)
at JitReflector.parameters (platform-browser-dynamic.js:61)
at CompileMetadataResolver._getDependenciesMetadata (compiler.js:15635)
at CompileMetadataResolver._getTypeMetadata (compiler.js:15527)
at CompileMetadataResolver.getNonNormalizedDirectiveMetadata 
(compiler.js:15012)
at CompileMetadataResolver.loadDirectiveMetadata (compiler.js:14866)
at eval (compiler.js:34392)
at Array.forEach (<anonymous>)

Оператор импорта для ToastService внутри UIToastComponent выглядит так:

import { ToastService } from '../../services/toast.service';

Библиотека соответствует формату Angular Package v5 и изначально была основана на https://github.com/juristr/ngx-tabs-libdemo

Вот исходный код библиотеки: ngx-example-library

РЕДАКТИРОВАТЬ

Я реализовал forRoot() по предложению Гюнтера Цохбауэра, но, к сожалению, я получаю тот же результат, вероятно, я его неправильно реализовал...

Вот что новосоздано UICoreModule выглядит внутри библиотеки:

import { ModuleWithProviders, NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { UIToastComponent } from './components/toast/toast.component';
import { ToastService } from './services/toast.service';

@NgModule({
    declarations: [
        UIToastComponent,
    ],
    providers: [],
    imports: [
        CommonModule,
    ],
    exports: [
        UIToastComponent,
    ]
})

export class UICoreModule {

    public static forRoot(): ModuleWithProviders {
        return {ngModule: UICoreModule, providers: [ToastService]};
    }

}

И вот AppModule внутри приложения:

import {NgModule} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';

import {AppComponent} from './app.component';
import {UICoreModule} from 'ngx-example-library';

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        UICoreModule.forRoot()
    ],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule {
}

Цените помощь с этим, это - настоящий ошеломляющий этот. Спорим, это действительно легко - когда ты умеешь!

РЕДАКТИРОВАТЬ (2)

Решение, упомянутое выше , работает в режиме AOT, но не в режиме JIT. Рад жить с этим на данный момент, приложение все равно строит AOT. Развитие может стать, когда приложение растет, хотя.

1 ответ

Решение

Вам необходимо реализовать forRoot в модуле, который определяет ваш пакет, предоставьте сервис там и импортируйте модуль в AppModule с MyModule.forRoot()

Смотрите также https://angular.io/guide/ngmodule-faq

Другие вопросы по тегам