在 Angular 应用程序中使用 AngularJS 组件时出错：“错误：在设置之前尝试获取 AngularJS 注入器。”

Question

我正在阅读 Angular 的升级指南，以了解如何在 Angular 应用程序中嵌入 AngularJS 组件。我使用Angular CLI创建了一个基本的 Angular 应用程序，并添加了一个简单的 AngularJS 模块作为依赖项。

当我运行时ng serve，应用程序编译没有错误。但是，在运行时，我在控制台中收到此消息：

Error: Trying to get the AngularJS injector before it being set.

是什么导致了这个错误，我该如何避免它？我没有偏离升级指南中详述的步骤。

下面是我如何在我的 Angular 应用程序中升级我的 AngularJS 组件：

// example.directive.ts
import { Directive, ElementRef, Injector } from '@angular/core';
import { UpgradeComponent } from '@angular/upgrade/static';

// this is the npm module that contains the AngularJS component
import { MyComponent } from '@my-company/module-test';

@Directive({
    selector: 'my-upgraded-component'
})
export class ExampleDirective extends UpgradeComponent {
    constructor(elementRef: ElementRef, injector: Injector) {

        // the .injectionName property is the component's selector
        // string; "my-component" in this case.
        super(MyComponent.injectionName, elementRef, injector);
    }
}

这是我的app.module.ts：

// app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { UpgradeModule } from '@angular/upgrade/static';
import { ExampleDirective } from './example.directive';
import { myModuleName } from '@my-company/module-test';

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

我正在使用 Angular 5.2.0。

Answer 1

我遇到了同样的问题，终于解决了。在引导混合 Angular/angularjs 应用程序之前，需要遵循一些步骤。

1. 安装升级模块 npm install @angular/upgrade

2. 将您的“CompanyModule”（注册所有公司组件的模块）包装到一个新的 angularjs 模块（例如：Ng1Shared）中。如果您没有用于公司组件的模块，则必须创建它。比降级 AppComponent 如下所示。

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

3. 使用基本导入（BrowserModule、CommonModule、UpgradeModule）配置 AppModule。将 angularjs 的 Injector 提供给 Angular；声明一个“entryComponent”并删除 AppComponent 的默认引导程序。

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

4. 使用 UpgradeModule 本身提供的函数全局设置 angularjs，并使用 @angular/core 提供的 DoBootstrap 方法手动引导 Angular。

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

5. 为每个 angularjs 组件创建一个包装器指令，并将其添加到 AppModule 的声明数组中。

   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);
     }
   }
   

我在 stackblitz 上写了一个简单的例子。例如，我将 angularjs MyCompanyModule 添加到另一个名为 Ng1Module 的 angularjs 模块中。正如您所看到的，angularjs 和 angular 组件之间的属性绑定也可以正常工作。

我希望它有用。

Answer 2

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

在引导 AngularJS 之前，您不能直接引导包含升级组件的 Angular 组件。相反，您可以降级 AppComponent 并让它作为应用程序 AngularJS 部分的一部分进行引导：

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