Angular 包在组件内部使用自己的服务

Question

我正在为跨多个应用程序共享的组件创建一个 angular 库。在库中的组件中使用库中的服务时，我运行遇到了麻烦。

该服务旨在注入应用程序的根目录（而非库），并且可以在整个应用程序中使用。

在这种情况下，我们正在查看 ToastService 和 UIToastComponent。 UIToastComponent 从 UIToastModule.

导出

应用程序然后在应用程序的 AppModule 中导入 UIToastModule，其中还提供 ToastService.

<ui-toast></ui-toast> 标签位于应用程序的 app.component.html 文件中。

想法是，在应用程序内的任何组件中，开发人员可以注入 ToastService 并调用 this.toastService.success('Great Success!')，它由 UIToastComponent 获取并显示 toast。

UIToastComponent的constructor似乎无法获取服务，在运行时出现以下错误：

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>)

UIToastComponent 中 ToastService 的导入语句如下所示：

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

图书馆遵循 Angular Package Format v5 and was originally based on https://github.com/juristr/ngx-tabs-libdemo

这里是库的源代码：ngx-example-library

编辑

我已经按照 Günter Zöchbauer 的建议实施了 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。开发可能会在应用程序增长时发生。

Answer 1

您需要在定义您的包的模块中实现 forRoot，在那里提供服务并使用 MyModule.forRoot()

导入 AppModule 中的模块

另见 https://angular.io/guide/ngmodule-faq#what-is-the-forroot-method

Angular 包在组件内部使用自己的服务

Angular package using its own service inside component

angular-services

angular

angular-library

angular5