角度内のAngularJSサービスの使用

Question

角度プロジェクト内に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をブートストラップする必要があります。

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

：これを実現するために、 ngDoBootstrap()をこのように、main.tsでアップグレードパーツ（ then(...)に全体の呼び出し）を削除し、あなたのAppModuleに

bootstrap: [DmdWhlComponentMain] 

に

entryComponents: [DmdWhlComponentMain] 

を変更、および実装

クレジットはhttps://blog.angularindepth.com/how-to-manually-bootstrap-an-angular-application-9a36ccf86429にあり、この問題を解決するのに役立ちました。