Uncaught Error: Invalid provider for the NgModule 'ServiceModule' - only instances of Provider and Type are allowed

[mbakker96]

Short description of the problem:

I've pipes, services, component and pipes modules in my application that are imported into the app module. I make use of barrels for import but when i run it since ionic RC2 I get this error:

metadata_resolver.js:559Uncaught Error: Invalid provider for the NgModule 'ServiceModule' - only instances of Provider and Type are allowed, got: [[object Object], ?undefined?, ...]
    at http://localhost:8100/build/main.js:25207:23
    at Array.forEach (native)
    at CompileMetadataResolver.getProvidersMetadata (http://localhost:8100/build/main.js:25171:19)
    at CompileMetadataResolver.getNgModuleMetadata (http://localhost:8100/build/main.js:24930:58)
    at http://localhost:8100/build/main.js:24873:50
    at Array.forEach (native)
    at CompileMetadataResolver.getNgModuleMetadata (http://localhost:8100/build/main.js:24860:44)
    at RuntimeCompiler._compileComponents (http://localhost:8100/build/main.js:40894:47)
    at RuntimeCompiler._compileModuleAndComponents (http://localhost:8100/build/main.js:40832:37)
    at RuntimeCompiler.compileModuleAsync (http://localhost:8100/build/main.js:40823:21)

Becease it is a private repo I can't share the application.

Which @ionic/app-scripts version are you using?

"dependencies": {
    "@angular/common": "2.1.1",
    "@angular/compiler": "2.1.1",
    "@angular/compiler-cli": "2.1.1",
    "@angular/core": "2.1.1",
    "@angular/forms": "2.1.1",
    "@angular/http": "2.1.1",
    "@angular/platform-browser": "2.1.1",
    "@angular/platform-browser-dynamic": "2.1.1",
    "@angular/platform-server": "2.1.1",
    "@ionic/storage": "1.1.6",
    "@types/jasmine": "^2.5.35",
    "ionic-angular": "2.0.0-rc.2",
    "ionic-native": "2.2.3",
    "ionicons": "3.0.0",
    "ng2-translate": "^3.1.3",
    "rxjs": "5.0.0-beta.12",
    "zone.js": "0.6.21"
  },
  "devDependencies": {
    "@ionic/app-scripts": "0.0.39",
    "typescript": "^2.0.3"
}

[jgw96]

Hello, thanks for using Ionic! If you don't use barrels to import, but instead just import the provider normally and add that to your ngModule does it work?

[mbakker96]

Here my ngModule for my services

import {IonicModule, Events} from 'ionic-angular';
import {NgModule} from '@angular/core';
import {
    CwSqlService,
    ApiService,
    HttpService,
    DataService,
    SettingsService,
    AuthenticationService,
    ProjectService,
    StatesService,
    TimerService,
    LocationService
} from './';
import {XHRBackend, RequestOptions} from '@angular/http';

@NgModule({
    declarations:    [],
    imports:         [IonicModule],
    exports:         [],
    entryComponents: [],
    providers:       [
        {
            provide:    HttpService,
            useFactory: (backend: XHRBackend, defaultOptions: RequestOptions, events: Events ) => new HttpService(backend, defaultOptions, events),
            deps:       [XHRBackend, RequestOptions, Events]
        },
        SettingsService,
        AuthenticationService,
        ProjectService,
        StatesService,
        TimerService,
        LocationService,
        ApiService,
        HttpService,
        CwSqlService,
        DataService,
    ],
})

export class ServiceModule {
}

[maxkunitsa]

@mbakker96 try to remove providers[] from @NgModule and change export class ServiceModule {} to:

1. Add ModuleWithProviders to "import {NgModule, ModuleWithProviders} from '@angular/core'";

export class ServiceModule {
  static forRoot(): ModuleWithProviders {
    return  {
     ngModule: ServiceModule,
      providers:       [
        {
            provide:    HttpService,
            useFactory: (backend: XHRBackend, defaultOptions: RequestOptions, events: Events ) => new HttpService(backend, defaultOptions, events),
            deps:       [XHRBackend, RequestOptions, Events]
        },
        SettingsService,
        AuthenticationService,
        ProjectService,
        StatesService,
        TimerService,
        LocationService,
        ApiService,
        HttpService,
        CwSqlService,
        DataService,
    ]
   };
 }
}

In AppModule add call of ServiceModule to imports[] :

@NgModule({
....
imports: [ 
ServiceModule.forRoot()
]
...
})
export class AppModule {}

[mbakker96]

like this?

import {NgModule, ModuleWithProviders} from '@angular/core';
import {IonicModule} from 'ionic-angular';
import {
    CWHTTPSERVICEPROVIDER,
    CwSqlService,
    ApiService,
    HttpService,
    DataService,
    SettingsService,
    AuthenticationService,
    ProjectService,
    StatesService,
    TimerService,
    LocationService
} from './';

@NgModule({
    declarations:    [],
    imports:         [IonicModule],
    exports:         [],
    entryComponents: [],
})

export class ServiceModule {
    static forRoot(): ModuleWithProviders {
        return {
            ngModule:  ServiceModule,
            providers: [
                CWHTTPSERVICEPROVIDER,
                SettingsService,
                AuthenticationService,
                ProjectService,
                StatesService,
                TimerService,
                LocationService,
                ApiService,
                HttpService,
                CwSqlService,
                DataService,
            ]
        };
    }
}

[mbakker96]

I'm a stap closer but now i get this error. I know it is becease I try to import something that is not imported yet becease it is below the import line. but is there a fix for this?

Uncaught Error: Can't resolve all parameters for SettingsService: (?, TranslateService, Events).
    at CompileMetadataResolver.getDependenciesMetadata (http://localhost:8100/build/main.js:25148:19)
    at CompileMetadataResolver.getTypeMetadata (http://localhost:8100/build/main.js:25049:26)
    at http://localhost:8100/build/main.js:25192:41
    at Array.forEach (native)
    at CompileMetadataResolver.getProvidersMetadata (http://localhost:8100/build/main.js:25172:19)
    at http://localhost:8100/build/main.js:24870:71
    at Array.forEach (native)
    at CompileMetadataResolver.getNgModuleMetadata (http://localhost:8100/build/main.js:24861:44)
    at RuntimeCompiler._compileComponents (http://localhost:8100/build/main.js:40895:47)
    at RuntimeCompiler._compileModuleAndComponents (http://localhost:8100/build/main.js:40833:37)

[maxkunitsa]

@mbakker96 i have import of IonicModule in AppModule

import: [
  IonicModule.forRoot(AppMainModule, {menuType: 'overlay'})
]

[mbakker96]

no this is import service into service.

service A required service B but it in de module I set Service A before B so A can't find B.

[maxkunitsa]

@mbakker96 i had such error's when i had circular dependencies or when i tried to insert Service to not injectable CLASS.

[mbakker96]

Sorry I don't understand what you try to describe.

[mbakker96]

My app.module.ts looks like this:

@NgModule({
    declarations:    [MyApp],
    imports:         [
        ServiceModule.forRoot(),
        BrowserModule,
        FormsModule,
        PagesModule,
        IonicModule.forRoot(MyApp),
        TranslateModule.forRoot({
            provide:    TranslateLoader,
            useFactory: (createTranslateLoader),
            deps:       [Http],
        })
    ],
    exports:         [TranslateModule],
    bootstrap:       [IonicApp],
    entryComponents: [MyApp],
    providers:       []
})
export class AppModule {
}

[maxkunitsa]

@mbakker96 so u have import of IonicModule both in AppModule and ServiceModule?

[mbakker96]

Yes becease the repo where i took the information about barrels and multiple modules had that.

[maxkunitsa]

@mbakker96 as i know u should have only 1 module import per module in app.

[mbakker96]

I've that now but hey says that i can't find the HttpService in the ApiService but I imported the HttpService (who does not need any services) before the ApiService.