角度混合应用程序中的依赖注入（AngularJS和Angular 5）

Question

我在ngUpgraded AngularJS控制器中进行依赖项注入时遇到了问题。我想在我的混合应用程序中使用toastr和Handlebars.js模块，但是我的每一次尝试都给了我错误（把手是处理服务器端外部脚本的必要条件，这是很久以前写的，这就是为什么我需要使用它一些反模式解决方案）。最后一个脚本（提供程序）仅适用于jQuery。

AngularJS控制器：

    export const dataVisualization = {
        selector: 'dataVisualizationNgJs',
        templateUrl: './data-visualization-ngjs.template.html',
        bindToController: {
            data: '='
        },
        controller: ['$scope', '$timeout', ($scope, $timeout) => {
          ....
       }
    Directive({
        selector: dataVisualization.selector
    })
    export class DataVisualizationFacade extends UpgradeComponent {
        @Input() data: any;

        constructor(elementRef: ElementRef, injector: Injector) {
            super(dataVisualization.selector, elementRef, injector);
        }
    }

AngularJS模块：

    export const ngjsModule = angular.module('dataVisualizationNgJs', [])
        .component(dataVisualization.selector, dataVisualization).directive(DataVisualizationComponent.selector, downgradeComponent({
            component: DataVisualizationComponent,
        }) as angular.IDirectiveFactory);

Angular 5模块：

    @NgModule({
        declarations: [
            DataVisualizationComponent,
            DataVisualizationFacade,
        ],
        entryComponents: [
            DataVisualizationComponent
        ],
        imports: [
            NgbModule,
            GatewaySharedModule,
            RouterModule.forChild(DataVisualizationRoute),
            FormsModule,
            UpgradeModule,
        ],
        providers: [
            jQueryProvider,
            toastrProvider,
            handlebarsProvider,
            {
                provide: '$scope',
                useFactory: (i) => i.get('$rootScope'),
                deps: ['$injector']
            }
        ]
    })

    export class DataVisualizationModule {
    }

Angular 5提供者：

    export const JQUERY_TOKEN = new InjectionToken('jQuery');

    export const jQueryFactory = () => {
        return $;
    };

    export const jQueryProvider = {
        provide: JQUERY_TOKEN,
        useFactory: jQueryFactory
    };

    export const TOASTR_TOKEN = new InjectionToken('toastr');

    export const toastrFactory = () => {
        return toastr;
    };

    export const toastrProvider = {
        provide: TOASTR_TOKEN,
        useFactory: toastrFactory
    };


    export const HANDLEBARS_TOKEN = new InjectionToken('Handlebars');

    export const handlebarsFactory = () => {
        return Handlebars;
    };

    export const handlebarsProvider = {
        provide: HANDLEBARS_TOKEN,
        useFactory: handlebarsFactory
    };