Injecting service

Ionic Framework ionic-v3
1

Hi,

I have problems with injecting service. The scenario is as follows:
App.ts
---- User.ts (service)
…|
…|- localDataBase.ts (service))
…|- DataServer.ts (service with http in constructor)

In my app.ts:

  • I add

providers: [HTTP_PROVIDERS,LocalDataBase, SettingsSvc,DataServer,User]

Consutructor in User.ts:

import {Injectable, Inject} from ‘@angular/core’;
import {LocalDataBase} from ‘./database’;
import {Platform} from ‘ionic-angular’;
import {DataServer} from ‘./dataServer’;
import {Http, Response, Headers, RequestOptions} from ‘@angular/http’;

@Injectable()
export class User {

constructor(private localDataBase: LocalDataBase,
    private platform: Platform,
    private dataServer: DataServer) {

Constructor in DataServer:

import {Injectable} from ‘@angular/core’;
import {Http, Response, Headers, RequestOptions} from ‘@angular/http’;
import {AppSettings} from ‘./appSettings’;
import {Observable} from ‘rxjs/Observable’;
import ‘…/import/rxjs-operators’;

@Injectable()
export class DataServer {

constructor(private http: Http) {

When i launch app in chrome, i have the following error in console:

reflective_provider.js:232
Uncaught Cannot resolve all parameters for ‘User’(LocalDataBase, Platform, undefined). Make sure that all the parameters are decorated with Inject or have valid type annotations and that ‘User’ is decorated with Injectable.

DataServer is undefined

Someone have a clue? what’s wrong?

2

First of all, you don’t need to declare HTTP_PROVIDERS in your app’s providers array. Ionic does that for you behind the scenes.

Did you change the way the code is structured in compilation units (I know that’s not really a thing in JavaScript, but I come from a C background and don’t know what else to call it) for the purposes of this post? Is it possible that you’re running into the problem described in this post about forward references and DI?

3

Thanks for you answer.

I have not changed the manner in which the code is structured.

I visited the site “forward references”, and apply the solution. Without success.

I continue to seek

4

I have reproduced the problem with a basic project.

ionic start Test tutorial --v2 --ts

added services/dataserver.ts

import {Injectable, Inject, forwardRef} from ‘@angular/core’;
import {Observable} from ‘rxjs/Observable’;

@Injectable()
export class DataServer {

constructor() {     
    
}

}

added services/user.ts (with and without @Inject(forwardRef(() => DataServer)) )

import {Injectable, Inject, forwardRef} from ‘@angular/core’;
import {DataServer} from ‘./dataServer’;

@Injectable()
export class User {
public id = null;
public language = null;

constructor(private dataServer: DataServer) {

}

}

added provider in app.ts:

providers: [DataServer, User]

Then i launch “ionic serve”.

And i can see in chrome the following error:

reflective_provider.js:232
Uncaught Cannot resolve all parameters for ‘User’(undefined). Make sure that all the parameters are decorated with Inject or have valid type annotations and that ‘User’ is decorated with Injectable.

a priori, rather a problem with angular?

5

Finally! i found the problem!

I put a upper case on dataServer in user.ts import and not in app.ts.

never use cap on file name, i will remember!

6

Weird that that didn’t cause build failures.

7

yeah i agree.

Filename was: dataServer.ts (with uppercase on S)

import {DataServer} from ‘./dataServer’; => is ok
import {DataServer} from ‘./dataserver’; => is ko in IDE, typescript warm “cannot find module”

import {DataServer} from ‘./services/dataserver’; => is ok (!!!), typscript don’t warm

The result after transpile:
var dataserver_1
var dataServer_1
=> and the error message "Cannot resolve all parameters for ‘User’(undefined). "

8

This is precisely why I hate some of TypeScript’s defaults - specifically emit on error and implicity any. If you set noEmitOnError to true, I believe this error would have been fatal.

9

i will use this noEmitOnError!

What is really amazing (That was my case)
app.ts defined service without uppercase, typescript dont warm, javascript don’t warm
import {DataServer} from ‘./services/dataserver’; (
With a path like that,it seems not to detect the problem. This lead to a javascript variable without uppercase, and to my problem with dependency injection, DI trying to inject another variable with uppercase from user.ts.

Thanks for your help.

10

You might find some interesting stuff in this PR’s discussion and referenced issues.