Geek Answers Handbook

How to pass parameters for dependencies during the injection of services in services in Angular 2 (Ionic 2 / Angular 2 / Typescript)

I am making an example application for connecting to the websocket server in ionic 2 in typescript. link to repo

My requirement is to establish a connection to the web server during application startup

I am using angular2-websocket to create a connection.

References:

I get the error message "Cannot resolve all parameters for" $ WebSocket "(String, Array ,?). Make sure that all parameters are decorated with Inject or have valid type annotations and that" $ WebSocket "is decorated with an injectable."

CODE: app.ts

import {App, Platform} from 'ionic-framework/ionic'; import {TabsPage} from './pages/tabs/tabs'; import {ConnectionService} from './framework/connection/connection-service' import {$WebSocket} from 'angular2-websocket/angular2-websocket'; import {bootstrap} from 'angular2/platform/browser'; // https://angular.io/docs/ts/latest/api/core/Type-interface.html import {Type} from 'angular2/core'; @App({ template: '<ion-nav [root]="rootPage"></ion-nav>', config: {} }) export class MyApp { rootPage: Type = TabsPage; constructor(platform: Platform, private conn : ConnectionService) { platform.ready().then(() => { this.conn.connect(); }); } } bootstrap(MyApp, [$WebSocket, ConnectionService]);

connection-service.ts

 import {Injectable, Component, Inject} from 'angular2/core'; import {$WebSocket} from 'angular2-websocket/angular2-websocket'; import {bootstrap} from 'angular2/platform/browser'; @Injectable() export class ConnectionService { private _status: number; //private connection: $WebSocket; constructor( private connection : $WebSocket = new $WebSocket("ws://echo.websocket.org") ) { console.log("Starting connection"); //this.connection = new $WebSocket("ws://echo.websocket.org"); this.connection.onClose(this.onCloseHandler); this.connection.onError(this.onErrorHandler); this.connection.onOpen(this.onOpenHandler); this.connection.onMessage(this.onRecieveHandler, {}); } ... public connect() { this.connection.connect(true); } ... } bootstrap(ConnectionService, [$WebSocket]);
+6
source share
3 answers

The solution to my problem was to use the @App () Annotation (Specific to ionic) provider field instead of using bootstrap

 bootstrap(ConnectionService, [provide($WebSocket, useValue: new WebSocket("ws://echo.websocket.org")]);

Eg.

 @App({ template: '<ion-nav [root]="rootPage"></ion-nav>', config: {}, providers : [ provide( $WebSocket, { useValue: new $WebSocket("ws://echo.websocket.org") }), ConnectionService] })

A working sample can be found here.

+4
source

Obviously, $WebSocket requires a string , array and another parameter that makes $WebSocket non-synthesizable, at least not directly.

As a workaround you can use

 import {Injectable, Component, Inject, provide} from 'angular2/core'; bootstrap(ConnectionService, [provide( $WebSocket, { useValue: new $WebSocket("ws://echo.websocket.org") })]);

There are other options if the string literal is not what you want, for example factory.

+2
source

From what I see, you should provide $WebSocket by injection, as you create it yourself for your service. I would remove it from bootstrap and create an instance in the constructor instead of providing it from the constructor options:

 @Injectable() export class ConnectionService { private _status: number; private connection: $WebSocket; constructor() { this.connection = new $WebSocket("ws://echo.websocket.org"); } }

In general, if you want to use dependency injection in Angular, you must let Angular2 create the things you want in the constructor yourself.

In your case, Angular2 tries to create an instance of the $WebSocket service. I think its constructor accepts three parameters and when Angular2 tries to resolve these parameters at the instance level. He cannot solve the latter. Could you provide the $WebService constructor options?

0
source

More articles:


All Articles