如何创建依赖于 ionic 2/angular 2 并使用依赖注入的库答案

【问题标题】：How to create library that depends on ionic 2/angular 2 and uses Dependency Injection如何创建依赖于 ionic 2/angular 2 并使用依赖注入的库
【发布时间】：2017-07-24 16:01:45
【问题描述】：

为我们的问题提供一些上下文：

我和我的团队正在开发一个具有多个客户版本的 Ionic 2 应用程序。尽管应用程序功能大致相同，但不同的客户版本具有不同的设置、名称和视图的细微变化。因此，该应用的核心在应用的所有客户版本中都是相同的。

为了管理这些不同客户版本的应用程序中的核心代码，我们希望能够快速轻松地更新它们。

我们的想法是创建一个包含核心功能、模型、枚举等的 NPM 包。使用 NPM，我们将能够更新主项目，将其作为包发布到 NPM，然后将该包安装到我们的不同客户版本。这样，核心代码将易于管理，并且不需要复制代码，因为我们只需要运行 npm update [package-name] 并将 package.json 中的更改提交到源代码控制。

所以我们尝试这样做，将应用程序的核心创建为 NPM 包，并让应用程序引用 NPM 包而不是它们包含的核心代码（我们试图用所述 NPM 包替换）。用几个类测试它是成功的，直到我们偶然发现了可注入服务。当可注入服务依赖于依赖注入 (DI) 时，代码将中断并提供以下错误日志；

问题：

Error: Uncaught (in promise): No provider for AuthHttp! (TabsPage -> AuthService -> ApiService -> AuthHttp)

请记住，我们的应用程序客户版本中的核心代码在应用程序本身内部时可以正常工作，只有在被 NPM 包使用时它才不起作用

此错误发生在我们应用程序的根页面 TabsPage 上。该应用程序通过使用 AuthService 来检查用户是否通过 Auth0 进行了身份验证，如果没有，它会打开一个 Auth0 锁（这是 Auth0 的登录页面），这里没有什么特别的事情发生。如果身份验证成功或用户已通过身份验证，则使用 ApiService 从我们的数据库中检索与该 Auth0 用户对应的用户配置文件，然后使用 AuthHttp 库从我们的 C# WebApi 获取用户。

错误表明没有 AuthHttp 提供者，即使它是在客户版本应用的 App.ts 的 @App 装饰器中设置的：

// imports above
@App({
    template: '<ion-nav id="nav" [root]="rootPage"></ion-nav>',
    providers: [ApiService, CartService, UtilService, AppSettings, AuthService,
        provide(AuthHttp, {
            useFactory: (http) => {
                return new AuthHttp(new AuthConfig(), http);
            },
            deps: [Http]
        })
    ],
    config: {
    } // http://ionicframework.com/docs/v2/api/config/Config/
})
export class AppNameApp {
    // Set starting root page of the app to TabsPage
    rootPage: Type = TabsPage;

    constructor(platform: Platform){
        platform.ready().then(() => {
            StatusBar.overlaysWebView(false);
            StatusBar.backgroundColorByHexString(AppSettings.appStatusBarColorHexString);
        });
    }
}

我知道 NPM 包中没有 AuthHttp 提供程序，这可能是这个问题的根源，我只是不知道如何完成。

你有什么建议吗？我也对其他解决方案持开放态度，以便轻松更新我们客户版本应用的核心代码。

非常感谢。

【问题讨论】：

标签： dependency-injection npm angular ionic2

【解决方案1】：

我认为您在提供程序中忘记了HTTP_PROVIDERS：

@App({
  template: '<ion-nav id="nav" [root]="rootPage"></ion-nav>',
  providers: [
    HTTP_PROVIDERS, // <--------------
    ApiService, CartService, UtilService, AppSettings, AuthService,
    provide(AuthHttp, {
        useFactory: (http) => {
            return new AuthHttp(new AuthConfig(), http);
        },
        deps: [Http]
    })
  ],
  config: {
  } // http://ionicframework.com/docs/v2/api/config/Config/
})

这是必需的，因为您将 Http 作为您的 AuthHttp 提供程序的依赖项。

【讨论】：

不幸的是，这并没有解决我的问题。我想强调一个事实，即当核心代码在内部项目中，而不是从 NPM 包中使用时，应用程序可以完美运行。

【解决方案2】：

可能有点晚了。翻译服务有问题。通过将此代码添加到打字稿配置来设法修复它。

"paths": {
 "@angular/*": [
   "../node_modules/@angular/*"
 ],

 "@ngx-translate/*" : [
   "../node_modules/@ngx-translate/*"
 ]

【讨论】：