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的演示非常复杂

EDIT：提供程序可以在我的angularJS应用程序中的任何地方工作，但是我想让传递的是它在app.config.js内部具有提供程序，因此该应用程序的主要组件。只有在那里它将返回未定义。

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

将Angular4提供者转换为angularJS应用具有提供者

1 个答案: