I've got a problem with dependency injection in ngUpgraded AngularJS controller. I'd like to use toastr and Handlebars.js module in my hybrid app, but my every attempt to do it gives me erros (handlebars is necessary to handle external scripts from server side written long time ago, that's why I need to use this some antipattern solution). The last script (providers) works only for jQuery usage.
AngularJS controller:
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 module:
export const ngjsModule = angular.module('dataVisualizationNgJs', []) .component(dataVisualization.selector, dataVisualization).directive(DataVisualizationComponent.selector, downgradeComponent({ component: DataVisualizationComponent, }) as angular.IDirectiveFactory);
Angular 5 module:
@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 providers:
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 };