Error when importing an AngularJS component into an Angular app: "Trying to get the AngularJS injector before it being set."

[nfriend]

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[x] Bug report  
[ ] Feature request
[ ] Documentation issue or request
[ ] Support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question

Current behavior

Embedding an upgraded AngularJS component in an Angular application results in an error message: Error: Trying to get the AngularJS injector before it being set.

Expected behavior

An upgraded AngularJS component should be able to be used in an Angular application with no errors.

Minimal reproduction of the problem with instructions

I ran into this problem while following the instructions on using AngularJS components in an Angular application here: https://angular.io/guide/upgrade.

I've created a repository that demonstrates the issue here: https://github.com/nfriend/angularjs-in-angular-bug-repro. Instructions on how to build the application are included in the repository's README.

At a high level, here are the steps I took:

1. Generated a new Angular (v5.2.0) app using the Angular CLI (v1.7.3): ng new angular-app
2. Generated a new AngularJS module using a custom Yeoman generator. Built the module and npm link-ed it into the Angular app generated in the previous step.
3. Followed the instructions here to import the AngularJS component into the Angular app and upgrade it: https://angular.io/guide/upgrade#using-angularjs-component-directives-from-angular-code

• Created a new Angular directive to wrap the AngularJS component:

import { Directive, ElementRef, Injector, SimpleChanges } from '@angular/core';
import { ExampleComponent } from 'angularjs-module';
import { UpgradeComponent } from '@angular/upgrade/static';

@Directive({
    selector: 'upgraded-example-component'
})
export class ExampleDirective extends UpgradeComponent {
    constructor(elementRef: ElementRef, injector: Injector) {
        super(ExampleComponent.injectionName, elementRef, injector);
    }
}

• Imported this directive into my app.module.ts and bootstrapped AngularJS in the ngDoBootstrap hook:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { ExampleDirective } from './example-component/example.component';
import { UpgradeModule } from '@angular/upgrade/static';
import { angularjsModule } from 'angularjs-module';

@NgModule({
    declarations: [AppComponent, ExampleDirective],
    imports: [BrowserModule, UpgradeModule],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule {
    constructor(private upgrade: UpgradeModule) {}
    ngDoBootstrap() {
        this.upgrade.bootstrap(document.body, [angularjsModule], {
            strcitDi: true
        });
    }
}

• Added a reference to my new upgraded directive in app.component.html:

<upgraded-example-component></upgraded-example-component>

4. Built and ran the application. This caused the following error to be thrown in the console:

Error: Trying to get the AngularJS injector before it being set.
    at injectorFactory (static.js:694)
    at _callFactory (core.js:10914)
    at _createProviderInstance$1 (core.js:10868)
    at resolveNgModuleDep (core.js:10850)
    at NgModuleRef_.get (core.js:12087)
    at Object.resolveDep (core.js:12577)
    at Injector_.get (core.js:11734)
    at new UpgradeHelper (static.js:809)
    at ExampleDirective.UpgradeComponent (static.js:1114)
    at new ExampleDirective (example.component.ts:10)

I'm not sure if this is a real bug or just an issue with the upgrade documentation (https://angular.io/guide/upgrade).

Environment

Angular version: 5.2.0


Browser:
- [x] Chrome (desktop) version 65.0.3325.181 (Official Build) (64-bit)
- [?] Chrome (Android) version XX
- [?] Chrome (iOS) version XX
- [x] Firefox version 59.0.2 (64-bit)
- [?] Safari (desktop) version XX
- [?] Safari (iOS) version XX
- [?] IE version XX
- [x] Edge version 40.15063.674.0
 
For Tooling issues:
- Node version: 8.9.1  
- Platform: Windows 10  

Others:

Angular CLI version: 1.7.3

[gkalpak]

When declaring bootstrap components in an NgModule, ngDoBootstrap() is not called.
Quoting the upgrade guide:

Note that you do not add a bootstrap declaration to the @NgModule decorator, since AngularJS will own the root template of the application.

Alternatively, if you want/need to specify a bootstrap component, you can move the upgrade.bootstrap() call from the module's ngDoBootstrap() method to the bootstrap component's ngOnInit() lifecycle hook.

Closing since everything works as expected.

[AminRahimi]

same error when i move upgrade.bootstrap() to ngOnInit() @gkalpak
even removing bootstrap from ngModule dont solve this problem
@petebacondarwin @IgorMinar
https://stackblitz.com/edit/angular-pyvy53

[gkalpak]

@AminRahimi, you cannot directly bootstrap an Angular component that contains upgraded components before bootstrapping AngularJS. Instead, you can downgrade AppComponent and let it be bootstrapped as part of the AngularJS part of the app: demo

[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.}