Angular4 提供程序到 angularJS 应用程序有提供程序

Question

我在 angularjs 中有一个应用程序，它被移植到 angular4。

我想在 angular4 中创建一个提供程序，并将其注入到 angularJS 的 app.config 中。

现在，我有以下内容

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

组件将是您要使用提供程序的组件。我以前用过类似的东西，它奏效了。你可以参考这个特定的文档：

Angular documentation for making angular dependencies injectable in AngularJS