无法解析 [...] 的所有参数

Question

Looks like a pretty common problem. I want to use Service1 in Service2 and I get the exception

Error: Can't resolve all parameters for ILIASRestProvider: (Http, ?).

even though in other Components Service2 seems to be injectable. And I think I have everything together:

• @Injectable at the Service1 and Service2
• tsconfig.json emitDecoratorMetadata set to true
• Registered Service1 and Service2 in the Providers part of the ngModule

If it matters at all: I'm building an Ionic 2 RC0 Application. Here are the important files:

app.module.ts

import { NgModule } from '@angular/core';
import { IonicApp, IonicModule } from 'ionic-angular';
import { MyApp } from './app.component';
import {AppConfig} from "../config/app-config";
import {ConnectionService} from "../services/ilias-app.service";
import {ILIASRestProvider} from "../providers/ilias-rest.provider";
import {MigrationsService} from "../services/migrations.service";
import {FooterToolbarService} from "../services/footer-toolbar.service";
import {ObjectListPage} from "../pages/object-list/object-list";
import {FavoritesPage} from "../pages/favorites/favorites";
import {NewObjectsPage} from "../pages/new-objects/new-objects";
import {SettingsPage} from "../pages/settings/settings";
import {InfoPage} from "../pages/info/info";
import {LogoutPage} from "../pages/logout/logout";
import {SynchronizationService} from "../services/synchronization.service";
import {DataProvider} from "../providers/data-provider.provider";
import {FileService} from "../services/file.service";
import {DataProviderFileObjectHandler} from "../providers/handlers/file-object-handler";
import {TranslatePipe} from "ionic-angular/index";
import {FileSizePipe} from "../pipes/fileSize.pipe";
import {HttpModule, Http} from '@angular/http';
import {TranslateModule} from 'ng2-translate/ng2-translate';
import {TranslateLoader} from "ng2-translate/src/translate.service";
import {TranslateStaticLoader} from "ng2-translate/src/translate.service";

@NgModule({
  declarations: [
    MyApp,
    ObjectListPage,
    FavoritesPage,
    NewObjectsPage,
    SettingsPage,
    InfoPage,
    LogoutPage,
    FileSizePipe,
    TranslatePipe
  ],
  imports: [
    HttpModule,
    IonicModule.forRoot(MyApp, {prodMode: window.hasOwnProperty('cordova')}),
    TranslateModule.forRoot({
      provide: TranslateLoader,
      useFactory: (http: Http) => new TranslateStaticLoader(http, '/assets/i18n', '.json'),
      deps: [Http]
    })
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    ObjectListPage,
    FavoritesPage,
    NewObjectsPage,
    SettingsPage,
    InfoPage,
    LogoutPage
  ],
  providers: [
    AppConfig,
    ConnectionService, //<-----------------------
    MigrationsService,
    ILIASRestProvider, //<-------------------------
    FooterToolbarService,
    DataProvider,
    FileService,
    SynchronizationService,
    DataProviderFileObjectHandler
  ]
})
export class AppModule {}

ilias-rest.provider.ts

@Injectable()
export class ILIASRestProvider {

    public constructor(private http:Http, public app:ConnectionService) {
    }
    ...
}

ilias-app.service.ts

@Injectable()
export class ConnectionService {

    ...

    constructor(public _config:AppConfig) {
        this._database = SQLiteDatabaseService.instance();
    }

    ...
}

app-config.ts

@Injectable()
export class AppConfig {

    protected data:any = {};

    constructor(public http:Http) {
    }

    ...
}

ionic setup

Your system information:

Cordova CLI: 5.4.1
Ionic Framework Version: 2.0.0-rc.0
Ionic CLI Version: 2.1.0
Ionic App Lib Version: 2.1.0-beta.1
OS: Distributor ID: Ubuntu Description: Ubuntu 14.04.5 LTS 
Node Version: v6.6.0

Answer 1

First thing i would suggest is to import from files directly rather than barrels, because that is the ideal way.

import {HttpModule, Http} from '@angular/http'; 
import {ConnectionService} from "../services/ilias-app.service";

@Injectable()
export class ILIASRestProvider {

public constructor(private http:Http, public app:ConnectionService) {
}
...
}

second thing if the above solution is not possible with your project than please reorder the import statements. They are not in correct order. for example http is being used in ILIASRestProvider should be imported before ILIASRestProvider.

Hope this helps

Answer 2

Just had the same problem here at work. The problem was that we had a circular file dependency.

1. SignInComponent was being tested in a unit test
2. SignInComponent used AuthService
3. AuthService used Routes.ts
4. Routes.ts defined a route that had SignInComponent as its component

You can spot this is the problem when the injection system cannot give you the name of what it is unable to create an instance of, and simply gives the name as "?"