Внедрить услугу angularjs в Angular

Question

Я пытаюсь использовать $log Служба в угловых 2, в соответствии с тем, что я прочитал, вам нужно следующие шаги:

1. Создайте модуль, содержащий сервис, который вы хотите внедрить.
2. Вызвать метод UpgradeAdapter upgradeNg1Provider.

Итак, я сделал следующее

  var initInjector = angular.injector(['ng']);
  var $log = initInjector.get('$log');
  angular.module('Services1', [])
    .service('$log', [$log]);
  upgradeAdapter.upgradeNg1Provider('$log');

Затем я создаю угловой компонент 2 следующим образом

    @Component({   selector: "ion-app",   template:"<p>Test</p>" })
    @Injectable()
    export class HelloIonicPage {
      message: string;
      constructor( @Inject('$log') $log) {
        this.message = "Hi";
      }
    }

Но когда я запускаю приложение, оно дает мне следующую ошибку:

ОРИГИНАЛЬНОЕ ИСКЛЮЧЕНИЕ: Нет провайдера для $ log!

Также я пытался bootstrap с помощью upgradeAdapter:

  upgradeAdapter.bootstrap(document.documentElement, ['Services1'])

Но это тоже не сработало. Пожалуйста, обратите внимание, что я использую Ionic 2 Framework и приведенный выше код написан внутри

    this.platform.ready().then(() => { 
            //The code is going here
});

Answer 1

Вам необходимо зарегистрировать услугу в качестве поставщика. Вот как я вводю angular1 $state в приложение angular 2:

@NgModule({
  providers: [
    {
       provide: '$state', 
       useFactory: ($injector: any) => $injector.get('$state'), 
       deps: ['$injector']
    }
  ]
})

а затем в месте инъекции:

@Injectable()
export class RestService {
  constructor(@Inject('$state') $state: any) {
    $state.go('...');
  }
}

Answer 2

Ответ от @Liovareg работает намного лучше, чем официальная документация. Мой сервис Angular (1.5.x) находился в файле JS, и это был@Injectчто мне не хватало в Angular 13 (и отличается от официальных документов).

Угловой JS:

      (function () {
    angular
        .module('common')
        .service('appContext', appContext);

    appContext.$inject = ['$cookies', 'moment', '$location', 'userCacheFactory', 'urlHrefCacheFactory', 'lock'];

    function appContext($cookies, moment, $location, userCacheFactory, urlHrefCacheFactory, lock) {
      ...
      function renewSession() {
        ...
      }
      ...
      return {
        renewSession: renewSession,
        ...
      };
    };
})();

ajs-upgraded-providers.ts (находится на том же уровне, что и app.module.ts):

      // @ts-ignore
import { appContext } from '../../../app/common/appContext';

export function appContextServiceFactory(injector: any) { // eslint-disable-line @typescript-eslint/no-explicit-any
  return injector.get('appContext');
}

export const ajsAppContextServiceProvider: any = { // eslint-disable-line @typescript-eslint/no-explicit-any
  deps: ['$injector'],
  provide: 'appContext',
  useFactory: appContextServiceFactory
};

app.module.ts:

      import { ajsAppContextServiceProvider } from './ajs-upgraded-providers';
...
@NgModule({
  ...
  providers: [
    ...,
    ajsAppContextServiceProvider
  ]
})
...

Угловой 13 (foo.service.ts):

      ...
@Injectable({
  providedIn: 'root'
})
export class SessionTimeoutService {
  ...
  public constructor(
    @Inject('appContext') private ajsAppContextService: any, // eslint-disable-line @typescript-eslint/no-explicit-any
    ...
  )
  ...
  public someMethod(): void {
    this.ajsAppContextService.renewSession();
  }
  ...
}