2016-05-13 50 views
4

提供一些背景我們的問題:如何創建庫,取決於離子2 /角2,並使用依賴注入

我和我的團隊正在開發一種離子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); 
     }); 
    } 
} 

據我所知,沒有AuthHttp提供商在NPM軟件包中,這可能是這個問題的根源,我只是不知道如何做到這一點。

你有什麼建議嗎?我也接受其他解決方案來輕鬆更新我們的客戶版本的應用程序的核心代碼。

非常感謝。

回答

0

我認爲,你忘了你的提供商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供應商的依賴。

+0

不幸的是,這並沒有解決我的問題。我想強調一個事實,即當核心代碼在項目內部時,應用程序可以很好地工作,而不是從NPM軟件包中使用。 – Bryandh

0

也許有點晚。有翻譯服務的問題。通過將此代碼添加到打字稿配置來管理修復它。

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

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