Angular2 DI does not work for ToDo example. [#2828263]

Seems like something is wrong with components bootstrapping as ng2_todo example fails to load with this exception:

Unhandled Promise rejection: Can't resolve all parameters for Ng2Todo: (?). ; Zone: ; Task: Promise.then ...

The reason is NG2 DI system cannot inject service TodoStore mentioned in Ng2Todo components' constructor:

    constructor(todoStore: TodoStore) {
        this.todoStore = todoStore;
    }

If I it's told manually what should be injected, example works fine:

    constructor(@Inject(TodoStore) todoStore: TodoStore) {
        this.todoStore = todoStore;
    }

Comments

Comment #1

16 November 2016 at 22:04

potop created an issue. See original summary.

Comment #2

17 November 2016 at 15:26

mrjmd committed 1adcce0 on 8.x-1.x authored by potop

Issue #2828263 by potop: Angular2 DI does not work for ToDo example

Comment #3

mrjmd CreditAttribution: mrjmd commented 17 November 2016 at 15:28

Status:

Active

» Fixed

Good catch @potop! I've fixed this and pushed it to the latest 8.x-1.x branch. I'm about to roll a new alpha release which will also include this fix. Much appreciated.

Comment #4

potop CreditAttribution: potop commented 17 November 2016 at 16:22

Status:

Fixed

» Needs work

I'm sorry for not making it clear enough, but manually telling NG2 what service to inject into component is not a solution, but only a workaround.
DI should be able to determine which service to inject looking up at component's providers or its' parents providers lists. But now it does not work this way when using PDB.
And if you want to have a hierarchy of components (and in my project I do have it) it's getting really painful.

Comment #5

mrjmd CreditAttribution: mrjmd commented 17 November 2016 at 19:47

I am seeing this same behavior in the latest release with Angular 2.2.0, but can't reproduce it on earlier versions.

Can you clarify for me what version of Angular 2 you are using in your build? You opened this issue against Decoupled Blocks Alpha 5, but when I test this against Alpha 5 the code is working perfectly (Angular 2.1.1). Also when I test against the 2.1.2 commit (deleting and rebuilding node_modules in each case, of course), everything still seems to be working.

Are you seeing this in earlier versions as well, or 2.2.0 only? I'm trying to rule out an upstream change in 2.2.0 that may have affected providers / injection.

I will keep digging on this, if you discover anything else that may point to the source of this issue please let me know.

Comment #6

potop CreditAttribution: potop commented 18 November 2016 at 16:45

I try to change angular version in package.js to "2.2.0" and "2.1.1" (initially I had 2.1.2) and after reinstallation of node modules I experience the same behaviour:

Unhandled Promise rejection: Can't resolve all parameters for Ng2Todo: (?). ; Zone: ; Task: Promise.then ...

This week have no time to dig deeper on this issue.

Comment #7

potop CreditAttribution: potop commented 17 January 2017 at 18:32

May be there is a problem with lazy loading of angular modules which is used by PDB module.

Current Angular2 documentation states that providers of lazy loaded modules are not seen in launch-time context:

Why is a service provided in a lazy loaded module visible only to that module?

Unlike providers of the modules loaded at launch, providers of lazy loaded modules are module-scoped.

When the Angular router lazy-loads a module, it creates a new execution context. That context has its own injector which is a direct child of the application injector.

The router adds the lazy module's providers and the providers of its imported modules to this child injector.

These providers are insulated from changes to application providers with the same lookup token. When the router creates a component within the lazy loaded context, Angular prefers service instances created from these providers to the service instances of the application root injector.