Dependency injection 如何创建依赖于ionic 2/angular 2并使用依赖项注入的库

为我们的问题提供一些背景：

我和我的团队正在开发一款具有多个客户版本的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用户对应的用户配置文件，ApiService反过来使用AuthHttp库从我们的C#WebApi获取用户

错误表示AuthHttp没有提供程序，即使它是在客户版本应用程序的App.ts的@App decorator中设置的：

// 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);
        });
    }
}

//上面的导入
@应用程序({
模板：“”，
提供者：[ApiService、CartService、UtilService、AppSettings、AuthService、，
提供（http{
useFactory：（http）=>{
返回新的AuthHttp（newauthconfig（），http）；
},
副署长：[Http]
})
],
配置：{
} // http://ionicframework.com/docs/v2/api/config/Config/
})
导出类AppNameApp{
//将应用程序的起始根页面设置为TabsPage
rootPage:Type=TabsPage；
建造商（平台：平台）{
platform.ready（）。然后（（）=>{
StatusBar.OverlysWebView（false）；
StatusBar.backgroundColorByHexString（AppSettings.appStatusBarColorHexString）；
});
}
}

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

你有什么建议吗？我也愿意使用其他解决方案轻松更新我们客户版本应用程序的核心代码

---

提前非常感谢。

我想您忘记了提供程序中的

HTTP\u提供程序

：

@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/
})

@App({
模板：“”，
供应商：[
HTTP_提供程序，//{
返回新的AuthHttp（newauthconfig（），http）；
},
副署长：[Http]
})
],
配置：{
} // http://ionicframework.com/docs/v2/api/config/Config/
})

---

这是必需的，因为您的

Http

依赖于

AuthHttp

提供者。

可能有点晚了。翻译服务有问题。通过将此代码添加到typescript配置中来解决此问题

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

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

---

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