Angular2: HowTo debug “Uncaught Invalid Provider” Error?

Question

I have dozens of imports in my app.ts and after a huge refactor to align with the official Angular2 styleguide, I am getting the infamous Invalid Provider Error. I am using RC4.

reflective_provider.js:170Uncaught Invalid provider - only instances of Provider and Type are allowed, got: undefined

How can I debug this? I need to know which imports / providers are wrong.

These are my imports:

https://gist.github.com/nottinhill/4d61beb9e3a05a6cfc11c65fcb4ad89a

This is my Ionic bootstrap:

https://gist.github.com/nottinhill/c8ef4f0f760af2f5a23ebeac35d6113b

Answer 1

In Angular2-RC4 provide from @angular/core is deprecated. you have to define your provider as below :

ionicBootstrap(MyApp, [

    GoalService,
    {
        provide : TranslateLoader,
        useFactory: (http: Http) => new TranslateStaticLoader(http, 'assets/i18n', '.json'),
        deps: [Http]
    },
    TranslateService,
    {
        provide : AuthHttp,
        useFactory: (http) => {
            return new AuthHttp(
                new AuthConfig(),
                http
            );
        },
        deps: [Http]
    },
    AuthService,
    AuthServerService,
    AuthServerMock,
    AuthZeroService,
    AuthZeroMock
]);

Answer 2

The root causes have been circular dependencies in barell imports down in my modules hierachy. Solution was to explicitly import via '../shared/service/service.service.ts' instead of '../shared/' deep down in the modules and services directoried.

Barell Importing in higher hierachies with "../shared/index" works fine.