Угловой пакет с использованием собственного сервиса внутри компонента
Я создаю угловую библиотеку для компонентов, совместно используемых несколькими приложениями. Я сталкиваюсь с проблемами при использовании службы внутри библиотеки внутри компонента из библиотеки.
Служба предназначена для внедрения в корень приложения (не в библиотеку) и может использоваться во всем приложении.
В этом сценарии мы смотрим на 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