Geek Answers Handbook

How to create a library that depends on ionic 2 / angular 2 and uses dependency injection

To provide us with context :

My team and I are developing an Ionic 2 application with multiple client versions. Despite the fact that the functionality of the application is approximately the same, different versions of clients have different settings, names and small changes in the views. Thus, the application core is the same in all client versions of the application.

To manage the main code in these different versions of the application, we would like to be able to update them quickly and easily.

Our idea was to create an NPM package that contained the basic functionality, models, enumerations, etc. Using NPM, we could update the main project, publish it to NPM as a package, and install this package in our different client version. Thus, the main code will be easily manageable, and there will be no need to copy the code, since we only need to run npm update [package-name]and commit this change to package.json to control the source code.

So, we tried to do just that by creating the application kernel as an NPM package and having applications related to the NPM package instead of the main code included (which we are trying to replace with the specified NPM package). Testing this with several classes was successful until we came across injection services. When the injection service depended on dependency injection (DI), the code would break and provide the following error log:

Problem

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

Keep in mind that the main code in our client versions of the application works fine when it is inside the application itself, it only does not work when it is used by the NPM package

TabsPage, . , Auth0 AuthService, , Auth0 ( Auth0), . , , Auth0, ApiService, , , AuthHttp # WebApi.

, AuthHttp , @App App.ts :

// 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, , , .

? , .

.

+4
2

, 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

, . . , typescript.

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

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

More articles:


All Articles