angularangularjsangular-servicesangular-hybrid

Is it possible to inject an Angular 2+ service (`@Injectable()`) into an AngularJS controller?

I'm working on a Angular10/AngularJS hybrid app and was wondering if it's possible to inject an Angular 10 service into an existing AngularJS controller.

I tried injecting my service (created with @Injectable()) to one of my controllers but I was getting an error:

Error: [$injector:unpr] Unknown provider: MyServiceProvider <- MyService <- FormsController
https://errors.angularjs.org/1.8.0/$injector/unpr?p0=MyServiceProvider%20%3C-%20MyService%20%3C-%20MyController
    at eval (angular.js?9656:138:1)
    at eval (angular.js?9656:4991:1)
    at Object.getService [as get] (angular.js?9656:5151:1)
    at eval (angular.js?9656:4996:1)
    at getService (angular.js?9656:5151:1)
    at injectionArgs (angular.js?9656:5176:1)
    at Object.instantiate (angular.js?9656:5220:1)
    at $controller (angular.js?9656:11787:1)
    at Object.eval (viewDirective.js?8384:320:1)
    at eval (angular.js?9656:1391:1)

I do have a proper setup with app.module.ts for the hybrid app and had no problems injecting old AngularJS services into the newer Angular 10 components.

Solution

  • No. That's not doable according to me.

    Angular JS works on factory methods architecture and Angular 2+ work on dependency injection. Angular 2 onwards things are completely different. Former uses normal JS with Controllers coated by factory methods, but later one is a typescript subset with enriched features.

    You need 2 different methods (obviously with same logic) for both Apps.