Question

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

我和我的团队正在开发一个拥有多个客户版本的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装饰器中设置的：

// 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提供程序，这可能是这个问题的根源，我只是不知道如何完成它。

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

提前多多感谢。

Answer 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提供商的依赖关系。

Answer 2

也许有点晚了。有翻译服务的问题。通过将此代码添加到打字稿配置来管理以修复它。

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

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

如何创建依赖于离子2 /角度2的库并使用依赖注入

2 个答案: