Поставщик Angular4 в приложение angularJS имеет поставщика

Question

У меня есть приложение в angularjs, которое портировано на angular4.

Я хотел бы создать провайдера в angular4 и добавить его в app.config в angularJS.

RightТеперь у меня есть следующее

import { UtilsService } from './../utils/utils.service';
import { Injectable, Inject } from '@angular/core';
import { downgradeInjectable } from '@angular/upgrade/static';


import { TranslateService } from '@ngx-translate/core';
import { ENGLISH } from '../../../../../languages/locale-en';
import { JAPANESE } from '../../../../../languages/locale-ja';


declare const angular: angular.IAngularStatic;

// USED to setup translation for angular4 from angularjs

@Injectable()
export class Angular4TranslateProvider{
    constructor(@Inject(TranslateService) public _translate: TranslateService) {}

    SetupAngular4Translation(){
        this._translate.setDefaultLang(UtilsService.DefaultLanguage());
        this._translate.use(UtilsService.DefaultLanguage());


        this._translate.setTranslation('en', ENGLISH );
        this._translate.setTranslation('jp', JAPANESE );
    }

    Use(lg:string){
        this._translate.use(lg);
    }

}


angular.module('b-eee').factory('angular4TranslateProvider', downgradeInjectable(Angular4TranslateProvider));

Это добавлено в App.Module:

providers: [

        Angular4TranslateProvider
    ],

И я пытаюсь вызвать его внутри моего app.config:

import { app } from './main';

(function() {
    'use strict';

    app.value('$routerRootComponent', 'app')

    app.config(["$routeProvider"
        , "angular4TranslateProvider"
        , function(
        $routeProvider
        , angular4TranslateProvider
        ) {

но у меня ошибка при загрузке страницы:

Ошибка: [$ injector: unpr] Неизвестный поставщик: angular4TranslateProvider.

Как я могу заставить его работать?

извините, демонстрация на plunker довольно сложна, чтобы дать

РЕДАКТИРОВАТЬ: провайдер работает везде из моего приложения angularJS, но я хочу дать проход, у него есть провайдер внутри app.config.js, поэтому основнойкомпонент приложения.Только там он вернет undefined.

Answer 1

Я не вижу, как вы регистрируете провайдера в ngModule.И есть еще фрагмент кода, который у вас должен быть, т.е.

 import { Angular4TranslateProvider} from './Angular4TranslateProvider';

 @NgModule({
    imports: [
     BrowserModule,
     UpgradeModule
 ],
 providers: [ Heroes ]
})
export class AppModule {
    constructor(private upgrade: UpgradeModule) { }
    ngDoBootstrap() {
      this.upgrade.bootstrap(document.body, ['b-eee'], { strictDi: true });
    }
}

Теперь внутри вашего angularJS преобразуйте сервис Angular в заводскую функцию angularJS и используйте его в модуле angularJS.

import { Angular4TranslateProvider} from './Angular4TranslateProvider';
/* . . . */
import { downgradeInjectable } from '@angular/upgrade/static';

angular.module('b-eee', [])
    .factory('angular4TranslateProvider', downgradeInjectable(Angular4TranslateProvider))
    .component('component', Component);

Компонент будет тот, где вы хотите использовать поставщика.Я использовал нечто подобное раньше, и это сработало.Вы можете обратиться к этой конкретной документации:

Угловая документация для создания угловых зависимостей, вводимых в AngularJS