5

我正在通过 Angular 的升级指南学习如何将 AngularJS 组件嵌入到 Angular 应用程序中。我使用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。

4

3 回答 3

8

我遇到了同样的问题，终于解决了。在引导混合 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 的注入器提供给 Angular；声明一个“entryComponent”并删除 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. 使用 UpgradeModule 本身提供的函数全局设置 angularjs，并使用 @angular/core 提供的 DoBootstrap 方法手动引导 Angular。

    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. 为每个 angularjs 组件创建一个包装器指令，并将其添加到 AppModule 的声明数组中。

    @Directive({
    selector: 'my-component'
})
export class MyComponentWrapper extends UpgradeComponent {
    @Input() title: string;

    constructor(elementRef: ElementRef, injector: Injector) {
      super('myComponent', elementRef, injector);
    }
}

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

我希望它有用。

于 2019-08-02T12:30:09.050 回答
0

尝试像这样将 entryComponents 添加到您的 AppModule 中：

...
@NgModule({
    declarations: [AppComponent, ExampleDirective],
    imports: [BrowserModule, AppRoutingModule, UpgradeModule],
    entryComponents: [
          AppComponent // Don't forget this!!!
    ],
    providers: [],
    // bootstrap: [AppComponent] // Delete or comment this line 
})
...
于 2019-05-12T15:35:27.010 回答
0

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

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

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

于 2018-04-09T10:27:49.153 回答