Angular4 provider into angularJS app has provider

Question

I have an app in angularjs, that is ported to angular4.

I would like to create a provider in angular4, and inject it in the app.config in angularJS.

Right now, I have the following

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

It is added to the App.Module :

providers: [

        Angular4TranslateProvider
    ],

And I am trying to call it inside my app.config :

import { app } from './main';

(function() {
    'use strict';

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

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

but I have an error on page load :

Error: [$injector:unpr] Unknown provider: angular4TranslateProvider.

How can I make it work ?

sorry, a demo on plunker is quite complicated to give

EDIT : THE Provider do work everywhere from my angularJS app, But I want to give pass it has provider inside the app.config.js so the main component of the app. Only there it will return undefined.

Answer 1

I don't see you registering the provider in the ngModule. And there is also a piece of code which you should have i.e.

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

Now inside your angularJS, convert the Angular service to angularJS factory function and use it in the angularJS module.

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

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

The component will be the one where you want to use the provider. I have used something similar before and it worked. You can refer to this particular documentation:

Angular documentation for making angular dependencies injectable in AngularJS