Dependency injection in nested modules doesn't seem to work

[tom-mayer]

I'm submitting a ... (check one with "x")

[x ] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question

Current behavior
I have an app module and modules for my sub components. In the ngDoBootstrap() of the main app module I initialize some shared services and give the created instance to the different sub components like so:

ngDoBootstrap(){
  var sharedService = new MyService();
  var provider = {provide: MyService, useValue: sharedService};
  ...
  platformBrowserDynamic().bootstrapModule(MyOtherModule, {providers: providers);
 ...
}

MyOtherModule is a simple wrapper for a component that just uses 'declarations' and 'bootstrap' to bootstrap a component. The component now crashes and says that there is no provider for MyService.

Expected/desired behavior
Since the component has no providers array it should look for a provider for MyService in the Module from which it was bootstrapped. Since the module has explicitly been given a provider for MyService, the component should get the instance sharedService when asking for a MyService.

Reproduction of the problem
A more verbose example is also listed here on stack:
http://stackoverflow.com/questions/38896842/migrating-conditional-boostrap-of-multiple-angular-apps-with-shared-services-to

Please tell us about your environment: MacOS El Capitan

• Angular version: 2.0.0-rc.5
• Browser: [Chrome 52]
• Language: [TypeScript tsc version 1.8.10]

[PatrickJS]

the ngDoBootstrap lifecycle hook doesn't work like that. what you're expecting is something like ngOnBootstrap or ngAfterBootstrap or ngOnInit none of them work on NgModule though. For ngDoBootstrap what you're looking to do is

ngDoBootstrap(moduleRef) {
  const appRef = moduleRef.injector.get(ApplicationRef);
  // somehow grab compFactory probably from entryComponents
  // bootstrap each entryCoponent
  appRef.bootstrap(compFactory);
}

but there's a problem with the ApplicationRef#bootstrap since it doesn't take an injector or providers anymore. You're better off doing this outside of NgModule and create an NgModule for each app. Or use Di in ngDoBootstrap to grab your service that way it's created during bootstrap rather than later

moduleRef.injector.get(MyService); // this makes sure that the service is created during bootstrap rather than later when something else injects it

[alobakov]

I think I'm having the same issue trying to inject a singleton instance of a service class into the module being bootstrapped, like so:

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';
import { Globals } from './globals';

export function main(params) {
    var globals = new Globals();
    globals.appVersion = params.appVersion;
    globals.isAuthenticated = params.isAuthenticated;
    globals.userDisplayName = params.userDisplayName;

    platformBrowserDynamic().bootstrapModule(AppModule,
        [{
            providers: [
                { provide: Globals, useValue: globals }
            ]
        }]);
}

This method is in boot.ts and gets called from javascript on an ASP.NET (cshtml) page to pass some values to the client app before it starts.
Without having explicitly declared Globals in AppModule's providers, I get the same error as the OP, i.e. "There's no provider for Globals!". Now, if I do declare "providers: [Globals]" explicitly on the module, the error goes away, but the instance being dispensed within the module is clearly not the singleton I have initialized and provided in the call.
By looking at the bootstrapModule() method, one would expect that the optional "providers" collection is meant to override any matching provider declarations found on the module specified, but... it just doesn't seem to work. So, I don't even know whether it has anything to do with where that method is being called from, and the OP's use of it within ngDoBootstrap() might be unrelated to the issue.

Environment: Windows 10

Angular version: 2.0.0-rc.5

Browser: [Chrome 52]

Language: [TypeScript tsc version 2.0.0]

[ollwenjones]

Don't know if my issue is related, but just in case. I was trying to extend Http class at the app level, but child injectors created via webpack-bundle + lazy route-loading were usually getting the super-class, even though I am not importing Http or HttpModule into any other module anywhere. I realize that's kind of vague, but it's the best I have time for atm.

[pkozlowski-opensource]

Hello, we reviewed this issue and determined that it doesn't fall into the bug report or feature request category. This issue tracker is not suitable for support requests, please repost your issue on StackOverflow using tag angular.

If you are wondering why we don't resolve support issues via the issue tracker, please check out this explanation.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}