Using services in Angular/AngularJS hybrid app (ng-upgrade)

Question

Currently building a slimmed down version of the app for plunker so I can SHOW you my problem, but in case anyone has any tips off the top of their heads in the mean time, I will attempt to describe my problem first.

I'm using ngUpgrade to start bringing a large application from AngularJS to Angular. I've got a core application running using Angular. Briefly it's set up a little like this:

@Component({
  selector: '[my-app]',
  template: `
    <app-main></app-main>
  `
})
export class AppComponent {};

@NgModule({
  imports: [
    BrowserModule,
    UpgradeModule,
  ],
  bootstrap: [AppComponent],
  declarations: [
    AppComponent
  ],
  schemas: [
    CUSTOM_ELEMENTS_SCHEMA
  ]
})
export class AppModule {
  constructor(public upgrade: UpgradeModule) { }
}

export const Ng1AppModule = angular.module(
    'mainApp',
    [
        'feature.one'
    ]
);

platformBrowserDynamic().bootstrapModule(AppModule).then(ref => {
  ref.instance.upgrade.bootstrap(document.body, [Ng1AppModule.name], {});
});

It successfully bootstraps itself and runs a root component which essentially loads the old AngularJS application. So far no major problems.

The AngularJS application has dependencies on a lot of custom feature modules which I now need to convert to Angular.

On one of the feature modules I want to convert a service. It's now an Angular @Injectable built in typescript and it is assigned to and AngularJS module like so:

export const Ng1FeatureModule = angular
    .module('feature.one', ['ngCookies'])
    .service('UpgradedService', downgradeInjectable(UpgradedService) as any);

This service requires a dependency from a service I have not even converted yet. Example:

@Injectable()
export class UpgradedService{
    public var1: string;

    constructor(private nonconvertedNG1Service: NonconvertedNG1Service) {
         this.var1 = nonconvertedNG1Service.get();
    }

    public getVar1() {
        return this.var1;
    }
}

How do I need to set things up so that my example app uses 'UpgradedService' and UpgradedService is able to use NonconvertedNG1Service?

Using services in Angular/AngularJS hybrid app (ng-upgrade)

0 Answers0