构建和发布 angular2 模块答案

【问题标题】：building and publishing an angular2 module构建和发布 angular2 模块
【发布时间】：2017-03-07 14:39:35
【问题描述】：

我已经为 angular2 编写了一个远程记录器，它工作正常。我现在想将它作为自己的 npm 库发布并努力使其可用。我已经将自己定位于ngx-translate 模块的设置。

我在内部使用的记录器的一般设置类似于Ben Nadel's Custom Error Handler Post 中描述的设置：

import {
  LOG4NG_SERVICE_HANDLER_PROVIDERS,
  LOG4NG_SERVICE_CONFIG,
  LOG4NG_ERROR_HANDLER_PROVIDERS,
  LOG4NG_ERROR_HANDLER_CONFIG } from './log4ng.service';
import * as message from './log4ng.service/message';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule
  ],
  providers: [
    LOG4NG_SERVICE_HANDLER_PROVIDERS,
    {
      provide: LOG4NG_SERVICE_CONFIG,
      useValue: {
        recipients: [
          {
            classname: 'ConsoleWriter',
            params: {
              name: 'Angular2 Test App::Console Logger'
            }
          }
        ],
        filters: [ /** filter definition **/ ]
      }
    },

    LOG4NG_ERROR_HANDLER_PROVIDERS,
    {
      provide: LOG4NG_ERROR_HANDLER_CONFIG,
      useValue: {
        rethrowError: false,
        unwrapError: false
      }
    }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

我尝试将这种方法调整到它自己的模块，如下所示：

import { NgModule, ModuleWithProviders } from '@angular/core';
import { CommonModule } from '@angular/common';
import {
  Log4ngService,
  ILog4ngServiceConfig,
  LOG4NG_SERVICE_CONFIG,
  LOG4NG_SERVICE_HANDLER_PROVIDERS,
  ErrorHandlerLoggingService,
  LOG4NG_ERROR_HANDLER_CONFIG,
  LOG4NG_ERROR_HANDLER_PROVIDERS
} from './src';

export * from './src';

@NgModule({
  imports: [
    CommonModule
  ],
  providers: [
    Log4ngService,
    ErrorHandlerLoggingService
  ]
})
export class Log4ngModule {
    static forRoot(config: ILog4ngServiceConfig = LOG4NG_SERVICE_CONFIG): ModuleWithProviders {
        return {
            ngModule: Log4ngModule,
            providers: LOG4NG_SERVICE_HANDLER_PROVIDERS
        };
    }

    static forChild(config: ILog4ngServiceConfig = LOG4NG_SERVICE_CONFIG): ModuleWithProviders {
        return {
            ngModule: Log4ngModule,
            providers: LOG4NG_SERVICE_HANDLER_PROVIDERS
        };
    }
}

我继续创建一个演示应用程序来使用这个模块并使用npm link 在本地使用该库。虽然它完全构建，但尝试在演示应用程序中使用它时，我收到运行时错误：

Error: Can't resolve all parameters for Log4ngService: (?)

我不明白，因为根据我的理解，所有必要的 DI 令牌都已正确设置。

你可以在这个 git-repository 的 dev-branch 中找到代码：https://github.com/LarsKumbier/log4ng/tree/dev

感谢任何帮助和提示 - 提前致谢！

【问题讨论】：

我不明白你为什么使用 forRoot 和 forChild ，因为你没有使用它们的参数config ？
是的，这些是 ngx-translate 的残余部分，一些尝试解决问题。应该删除那些。

标签： angular typescript dependency-injection npm angular2-modules

【解决方案1】：

由于问题出在Log4ngService，您可以使用这样的工厂

  /** Log4ngService factory */
    export function Log4ngServiceFactory(config: ILog4ngServiceConfig ) {
        return new Log4ngService (config);
    }  

    @NgModule({
      imports: [
        CommonModule
      ],
      providers: [
        ErrorHandlerLoggingService
      ]
    })
    export class Log4ngModule {
         static forRoot(config: ILog4ngServiceConfig = LOG4NG_SERVICE_CONFIG): ModuleWithProviders {
                return {
                    ngModule: Log4ngModule,
                    providers: [
                    { 
                       provide: Log4ngService,
                       useFactory: Log4ngServiceFactory,
                       deps : [config]
                    } 
                   ]
                };
            }
  }

【讨论】：