在 Angular 中使用 AngularJS 服务

Question

我正在 Angular 项目中搜索包含 AngularJS 服务。

这是我的 main.ts：

import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
import {AppModule} from './app/app.module';
import {UpgradeModule} from "@angular/upgrade/static";
import {environment} from './environments/environment';

platformBrowserDynamic().bootstrapModule(AppModule)
  .then(ref => {
    const upgrade = ref.injector.get(UpgradeModule) as UpgradeModule;
    upgrade.bootstrap(document.body, ['dmdWorkplace', 'dmdLogin'], {strictDi: true});
  })
  .catch(err => console.log(err));

这是我的 app.module.ts：

//@angular
import {BrowserModule} from '@angular/platform-browser';
import {CUSTOM_ELEMENTS_SCHEMA, Inject, NgModule} from '@angular/core';
import {UpgradeModule} from '@angular/upgrade/static';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {HttpClientModule} from '@angular/common/http';

//Modules
import {AppRoutingModule} from './app-routing.module';
import {MaterialModule} from './material.module';

//Components
import {DmdWhlComponentMain} from './main/dmd-whl.component.main';
import {DmdWhlComponentRegistries} from './registries/dmd-whl.component.registries';

//Services
import {DmdWhlGlobalService} from './services/dmd-whl.global.service';
import {DmdWhlLabelService} from './services/dmd-whl.label.service';

import {TranslateModule, TranslateService} from '@ngx-translate/core';
import {DOCUMENT} from "@angular/common";

@NgModule({
  declarations: [
    DmdWhlComponentMain,
    DmdWhlComponentRegistries
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MaterialModule,
    AppRoutingModule,
    UpgradeModule,
    HttpClientModule,
    TranslateModule.forRoot()
  ],
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  entryComponents: [DmdWhlComponentMain],
  providers: [
    DmdWhlGlobalService,
    DmdWhlLabelService,
    {
      provide: 'dmdLoginAuthenticationService',
      useFactory: (i) => {
        i.get('dmdLoginAuthenticationService')
      },
      deps: ['$injector']
    },
    {
      provide: '$scope',
      useFactory: i => i.get('$rootScope'),
      deps: ['$injector']
    }
  ],
  bootstrap: [DmdWhlComponentMain]
})

export class AppModule {
  labels: object = {};
  browserLanguage = navigator.language === 'en' ? 'en-US' : 'it-IT';

  constructor(private labelService: DmdWhlLabelService,
              private translate: TranslateService,
              @Inject('dmdLoginAuthenticationService') dmdLoginAuthenticationService,
              @Inject(DOCUMENT) private document: Document) {
    this.getLabels();
    this.run();
  }

  ngDoBootstrap() {
  }

  getLabels() {
    this.labelService.getLabels(this.browserLanguage, 'label').then(res => {
      this.translate.setDefaultLang('it'); //Sets the default language to use as a fallback
      this.translate.setTranslation(navigator.language, res['data'][this.browserLanguage]); //Sets an object of translations for a given language
    });
  }

  run() {
    if (navigator.platform.match('Mac') !== null) {
      this.document.body.classList.add('mac');
    }
  }
}

错误是：

Error: Trying to get the AngularJS injector before it being set.
    at injectorFactory (static.js:678)
    at _callFactory (core.js:10645)
    at _createProviderInstance$1 (core.js:10599)
    at initNgModule (core.js:10549)
    at new NgModuleRef_ (core.js:11792)
    at createNgModuleRef (core.js:11782)
    at Object.debugCreateNgModuleRef [as createNgModuleRef] (core.js:14092)
    at NgModuleFactory_.create (core.js:15216)
    at eval (core.js:5370)
    at ZoneDelegate.invoke (zone.js:392)

Answer 1

我今天收到了同样的错误信息，可以解决它。看起来您的代码也遇到了同样的问题。

在混合应用程序中，您总是需要先引导 AngularJS。为此，请删除 main.ts 中的升级部分（对then(...) 的整个调用），更改

  bootstrap: [DmdWhlComponentMain]

进入

  entryComponents: [DmdWhlComponentMain]

在您的 AppModule 中，并以这种方式实现 ngDoBootstrap()：

  ngDoBootstrap(app) {
    this.upgrade.bootstrap(document.body, ['dmdWorkplace', 'dmdLogin'], {strictDi: true});
    app.bootstrap(DmdWhlComponentMain);
  }

感谢https://blog.angularindepth.com/how-to-manually-bootstrap-an-angular-application-9a36ccf86429 帮助我解决了这个问题。