How to use @angular/upgrade - 10 common examples

@Injectable({
  providedIn: 'root'
})
export class ConstructTranslationIdsService {
  // Construct a translation id for library from name and a prefix.
  // Ex: 'categories', 'art' -> 'I18N_LIBRARY_CATEGORIES_ART'
  getLibraryId(prefix: string, name: string): string {
    return (
      'I18N_LIBRARY_' + prefix.toUpperCase() + '_' +
        name.toUpperCase().split(' ').join('_'));
  }
}

angular.module('oppia').factory(
  'ConstructTranslationIdsService',
  downgradeInjectable(ConstructTranslationIdsService));

describe('HeroesService (from AngularJS)', () => {
  // #docregion angularjs-setup
  beforeEach(module(createAngularJSTestingModule([Ng2AppModule])));
  beforeEach(module(ng1AppModule.name));
  // #enddocregion angularjs-setup

  // #docregion angularjs-spec
  it('should have access to the HeroesService',
     inject((heroesService: HeroesService) => { expect(heroesService).toBeDefined(); }));
  // #enddocregion angularjs-spec
});

*/
  // TODO(#7176): Replace 'any' with the exact type. This has been kept as
  // 'any' because 'learnerActionBackendDict' is a dict with underscore_cased
  // keys which give tslint errors against underscore_casing in favor of
  // camelCasing.
  createFromBackendDict(learnerActionBackendDict: any): LearnerAction {
    return new LearnerAction(
      learnerActionBackendDict.action_type,
      learnerActionBackendDict.action_customization_args,
      learnerActionBackendDict.schema_version);
  }
}

angular.module('oppia').factory(
  'LearnerActionObjectFactory',
  downgradeInjectable(LearnerActionObjectFactory));

* @param key the key to make scenarioo context aware
     * @returns {string} key with scenarioo context path from location url inside.
     */
    getScenariooContextPathAwareKey(key: string): string {

        // TODO: Workaround until the full migration, when the Angular router is available
        // this.currentBrowserLocation = this.location.prepareExternalUrl(this.location.path());
        this.currentBrowserLocation = (this.platformLocation as any).location.href;

        return '/' + this.urlContextExtractorService.getContextPathFromUrl(this.currentBrowserLocation) + '/' + key;
    }

}

angular.module('scenarioo.services')
    .factory('LocalStorageService', downgradeInjectable(LocalStorageService));

}));

    // Modals
    SdcUiComponentsNg1Module.service('SdcModalService', downgradeInjectable(Components.ModalService));
    SdcUiComponentsNg1Module.directive('sdcModal', downgradeComponent({
        component: Components.ModalComponent,
        inputs: ['size', 'title', 'message', 'buttons', 'type'],
        outputs: ['closeAnimationComplete']
    }));
    SdcUiComponentsNg1Module.directive('sdcModalButton', downgradeComponent({
        component: Components.ModalButtonComponent,
        inputs: ['callback', 'closeModal']
    }));

    // Notifications
    SdcUiComponentsNg1Module.service('SdcNotificationService', downgradeInjectable(Components.NotificationsService));
    SdcUiComponentsNg1Module.directive('sdcNotificationContainer', downgradeComponent({
        component: Components.NotificationContainerComponent
    }));
    SdcUiComponentsNg1Module.directive('sdcNotification', downgradeComponent({
        component: Components.NotificationComponent,
        inputs: ['notificationSetting'],
        outputs: ['destroyComponent']
    }));

    // Popup Menu
    SdcUiComponentsNg1Module.directive('popupMenuList', downgradeComponent({
        component: Components.PopupMenuListComponent,
        inputs: ['open', 'position', 'className', 'relative'],
        outputs: ['openChange', 'positionChange']
    }));
    SdcUiComponentsNg1Module.directive('popupMenuItem', downgradeComponent({

transclude: true,
  template: `<div class="title"></div>
             <h2>{{ $ctrl.hero.name }}</h2>
             <p>{{ $ctrl.hero.description }}</p>
             <button>Remove</button>`
});
// #enddocregion

// #docregion ng1-text-formatter-service
// This AngularJS service will be "upgraded" to be used in Angular
ng1AppModule.service('textFormatter', [TextFormatter]);
// #enddocregion

// #docregion downgrade-ng2-heroes-service
// Register an AngularJS service, whose value is the "downgraded" Angular injectable.
ng1AppModule.factory('heroesService', downgradeInjectable(HeroesService) as any);
// #enddocregion

// #docregion ng2-heroes-wrapper
// This directive will act as the interface to the "downgraded" Angular component
ng1AppModule.directive('ng2Heroes', downgradeComponent({component: Ng2HeroesComponent}));
// #enddocregion

// #docregion example-app
// This is our top level application component
ng1AppModule.component('exampleApp', {
  // We inject the "downgraded" HeroesService into this AngularJS component
  // (We don't need the `HeroesService` type for AngularJS DI - it just helps with TypeScript
  // compilation)
  controller: [
    'heroesService', function(heroesService: HeroesService) { this.heroesService = heroesService; }
  ],

//Utils
serviceModule.service('ArtifactsUtils', ArtifactsUtils);
serviceModule.service('FileUtils', FileUtils);
serviceModule.service('ValidationUtils', ValidationUtils);

serviceModule.service('AngularJSBridge',AngularJSBridge);
serviceModule.service('LoaderService', LoaderService);

serviceModule.factory('Sdc.Services.CategoryResourceService', CategoryResourceService.getResource);

// Angular2 upgraded services - This is in order to use the service in angular1 till we finish remove all angular1 code
serviceModule.factory('ComponentServiceNg2', downgradeInjectable(ComponentServiceNg2));
serviceModule.factory('ComponentServiceFactoryNg2', downgradeInjectable(ComponentServiceFactoryNg2));
serviceModule.factory('ServiceServiceNg2', downgradeInjectable(ServiceServiceNg2));
serviceModule.factory('ModalServiceNg2', downgradeInjectable(ModalService));
serviceModule.factory('ModalServiceSdcUI', downgradeInjectable(SdcUiComponents.ModalService));
serviceModule.factory('ConnectionWizardServiceNg2', downgradeInjectable(ConnectionWizardService));
serviceModule.factory('ComponentInstanceServiceNg2', downgradeInjectable(ComponentInstanceServiceNg2));
serviceModule.factory('UserServiceNg2', downgradeInjectable(UserServiceNg2));
serviceModule.factory('PoliciesServiceNg2', downgradeInjectable(PoliciesServiceNg2));
serviceModule.factory('GroupsServiceNg2', downgradeInjectable(GroupsServiceNg2));
serviceModule.factory('PluginsService', downgradeInjectable(PluginsService));
serviceModule.factory('EventBusService', downgradeInjectable(EventBusService));
serviceModule.factory('DynamicComponentService', downgradeInjectable(DynamicComponentService));
serviceModule.factory('ArchiveServiceNg2', downgradeInjectable(ArchiveServiceNg2));
serviceModule.factory('GabServiceNg2', downgradeInjectable(GabServiceNg2));
serviceModule.factory('AutomatedUpgradeService', downgradeInjectable(AutomatedUpgradeService));
serviceModule.factory('ToscaTypesServiceNg2', downgradeInjectable(ToscaTypesServiceNg2));

create(collectionRightsBackendObject: any): CollectionRights {
    return new CollectionRights(cloneDeep(collectionRightsBackendObject));
  }

  // Create a new, empty collection rights object. This is not guaranteed to
  // pass validation tests.
  createEmptyCollectionRights(): CollectionRights {
    return new CollectionRights({
      owner_names: []
    });
  }
}

angular.module('oppia').factory(
  'CollectionRightsObjectFactory',
  downgradeInjectable(CollectionRightsObjectFactory));

})
export class AudioLanguageObjectFactory {
  // TODO(#7176): Replace 'any' with the exact type. This has been kept as
  // 'any' because 'audioLanguageDict' is a dict with underscore_cased
  // keys which give tslint errors against underscore_casing in favor of
  // camelCasing.
  createFromDict(audioLanguageDict: any): AudioLanguage {
    return new AudioLanguage(
      audioLanguageDict.id,
      audioLanguageDict.description,
      audioLanguageDict.related_languages);
  }
}
angular.module('oppia').factory(
  'AudioLanguageObjectFactory',
  downgradeInjectable(AudioLanguageObjectFactory));

TopicsAndSkillsDashboardPageConstants
  ]
})
class TopicsAndSkillsDashboardPageModule {
  // Empty placeholder method to satisfy the `Compiler`.
  ngDoBootstrap() {}
}

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { downgradeModule } from '@angular/upgrade/static';

const bootstrapFn = (extraProviders: StaticProvider[]) => {
  const platformRef = platformBrowserDynamic(extraProviders);
  return platformRef.bootstrapModule(TopicsAndSkillsDashboardPageModule);
};
const downgradedModule = downgradeModule(bootstrapFn);

declare var angular: any;

angular.module('oppia', [
  'dndLists', 'headroom', 'infinite-scroll', 'ngAnimate',
  'ngAudio', 'ngCookies', 'ngImgCrop', 'ngJoyRide', 'ngMaterial',
  'ngResource', 'ngSanitize', 'ngTouch', 'pascalprecht.translate',
  'toastr', 'ui.bootstrap', 'ui.sortable', 'ui.tree', 'ui.validate',
  downgradedModule
].concat(
  window.GLOBALS ? (window.GLOBALS.ADDITIONAL_ANGULAR_MODULES || []) : []))
  // This directive is the downgraded version of the Angular component to
  // bootstrap the Angular 8.
  .directive(
    'serviceBootstrap',
    downgradeComponent({