Error when using AngularJS component inside Angular app: "Error: Trying to get the AngularJS injector before it being set."

I faced the same issue, and finally solved it. There are some steps to follow before bootstrap an hybrid Angular/angularjs application.

1. Install the UpgradeModule npm install @angular/upgrade

2. Wrap your "CompanyModule" (the module where all your company components are registered) into a new angularjs module (for instance: Ng1Shared). If you not have a module for your company components, it must be created. Than downgrade AppComponent as shown below.

   const MyCompanyModule = angular
      .module('MyCompanyModule', [])
      .component('myComponent', MyComponent)
      .name;
   
   
   const Ng1Shared = angular
      .module('Ng1Shared', [MyCompanyModule])
      .directive('appRoot', downgradeComponent({ component: AppComponent }))
      .name; 
   

3. Configure AppModule with basic imports (BrowserModule, CommonModule, UpgradeModule). Provide the angularjs' Injector to Angular; declare an "entryComponent" and remove the default bootstrap for AppComponent.

   @NgModule({
     imports: [BrowserModule, CommonModule, UpgradeModule], 
     declarations: [AppComponent], 
     providers: [{provide: '$scope', useExisting: '$rootScope'}], // REQUIRED
     entryComponents: [AppComponent], // ADD AN ENTRY COMPONENT 
     // bootstrap: [AppComponent] MUST BE REMOVED
   })
   

4. Set angularjs globally with a function provided by UpgradeModule itself and manually bootstrap Angular with DoBootstrap method provided by @angular/core.

   export class AppModule implements DoBootstrap { 
     constructor(private upgrade: UpgradeModule) { }
   
     public ngDoBootstrap(app: any): void {
       setAngularJSGlobal(angular);
       this.upgrade.bootstrap(document.body, [Ng1Shared], { strictDi: false });
       app.bootstrap(AppComponent);
     }
   }
   

5. Create a wrapper directive for every angularjs component and add it to AppModule's declaration array.

   @Directive({
       selector: 'my-component'
   })
   export class MyComponentWrapper extends UpgradeComponent {
       @Input() title: string;
   
       constructor(elementRef: ElementRef, injector: Injector) {
         super('myComponent', elementRef, injector);
       }
   }
   

I wrote a simple example available on stackblitz. For example purposes I added angularjs MyCompanyModule to another angularjs module, called Ng1Module. As you can see also property binding between angularjs and angular component works fine.

I hope it can be useful.

https://github.com/angular/angular/issues/23141#issuecomment-379493753

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:

https://stackblitz.com/edit/angular-djb5bu?file=app%2Fapp.module.ts

try to add an entryComponents to your AppModule like this :

...
@NgModule({
    declarations: [AppComponent, ExampleDirective],
    imports: [BrowserModule, AppRoutingModule, UpgradeModule],
    entryComponents: [
          AppComponent // Don't forget this!!!
    ],
    providers: [],
    // bootstrap: [AppComponent] // Delete or comment this line 
})
...