How to use the @angular/upgrade/static.downgradeComponent function in @angular/upgrade

// 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({
        component: Components.PopupMenuItemComponent,

import { CollaborativeExamSearchComponent } from './search/collaborativeExamSearch.component';
import { ExamSearchComponent } from './search/examSearch.component';
import { ExamSearchResultComponent } from './search/examSearchResult.component';
import { WaitingRoomComponent } from './waiting-room/waitingRoom.component';
import { WrongLocationComponent } from './wrong-location/wrongLocation.component';
import { WrongLocationService } from './wrong-location/wrongLocation.service';

require('../common');
require('../exam'); // TODO: refactor
require('../calendar/calendar.module.ajs.ts');

export default angular
    .module('app.enrolment', ['app.common', 'app.exam', 'app.calendar'])
    .service('Enrolment', downgradeInjectable(EnrolmentService))
    .service('WrongLocation', downgradeInjectable(WrongLocationService))
    .directive('activeEnrolment', downgradeComponent({ component: ActiveEnrolmentComponent }))
    .directive('enrolmentDetails', downgradeComponent({ component: EnrolmentDetailsComponent }))
    .directive('examEnrolments', downgradeComponent({ component: ExamEnrolmentsComponent }))
    .directive(
        'collaborativeExamParticipations',
        downgradeComponent({ component: CollaborativeExamParticipationsComponent }),
    )
    .directive('examFeedback', downgradeComponent({ component: ExamFeedbackComponent }))
    .directive('examParticipation', downgradeComponent({ component: ExamParticipationComponent }))
    .directive('examParticipations', downgradeComponent({ component: ExamParticipationsComponent }))
    .directive('collaborativeExamSearch', downgradeComponent({ component: CollaborativeExamSearchComponent }))
    .directive('examSearch', downgradeComponent({ component: ExamSearchComponent }))
    .directive('examSearchResult', downgradeComponent({ component: ExamSearchResultComponent }))
    .directive('waitingRoom', downgradeComponent({ component: WaitingRoomComponent }))
    .directive('wrongLocation', downgradeComponent({ component: WrongLocationComponent })).name;

});
// #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; }
  ],
  // This template makes use of the downgraded `ng2-heroes` component
  // Note that because its element is compiled by AngularJS we must use kebab-case attributes
  // for inputs and outputs
  template: `

* https://joinup.ec.europa.eu/software/page/eupl/licence-eupl
 *
 * Unless required by applicable law or agreed to in writing, software distributed under the Licence is distributed
 * on an "AS IS" basis, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the Licence for the specific language governing permissions and limitations under the Licence.
 */
import { downgradeComponent, downgradeInjectable } from '@angular/upgrade/static';
import * as angular from 'angular';

import { CollaborativeExamService } from './collaborativeExam.service';
import { CollaborativeExamListingComponent } from './collaborativeExamListing.component';

export default angular
    .module('app.exam.collaborative', [])
    .service('CollaborativeExam', downgradeInjectable(CollaborativeExamService))
    .directive('collaborativeExamListing', downgradeComponent({ component: CollaborativeExamListingComponent })).name;

constructor(upgrade: UpgradeModule, upgradeService: NgUpgradeService) {
    if(upgradeService.bootstrapped === false) {
      angular.module('awesome').directive('survey', downgradeComponent({component: SurveyDemo}));
      
      upgrade.bootstrap(document.querySelector('#awesome'), ['awesome']);
      upgradeService.bootstrapped = true;
    }
  }  
}

import {wpControllersModule} from '../../../angular-modules';
import {Component, Input} from '@angular/core';
import {downgradeComponent} from '@angular/upgrade/static';
import {WorkPackageResource} from 'core-app/modules/hal/resources/work-package-resource';

@Component({
  template: require('!!raw-loader!./wp-breadcrumb.html'),
  selector: 'wp-breadcrumb',
})
export class WorkPackageBreadcrumbComponent {
  @Input('workPackage') workPackage:WorkPackageResource;
}

wpControllersModule.directive(
  'wpBreadcrumb',
  downgradeComponent({component: WorkPackageBreadcrumbComponent })
);

import { platformBrowser } from '@angular/platform-browser';
import { UpgradeModule } from '@angular/upgrade/static';
import { downgradeComponent, downgradeInjectable } from '@angular/upgrade/static';
import { TextEditor } from './components/text-editor/text-editor';
import { Algorithms } from './components/algorithms/algorithms';
import { SurveyDemo } from './components/survey/survey-demo';
import { AngularModuleNgFactory } from './upgrade-aot/upgrade-module.ngfactory';
import { UpgradePubSubService } from './upgrade-pub-sub.service';
import { MessageComponent } from './message.component';
angular.module('angular-legacy').directive('algorithms', downgradeComponent({ component: Algorithms }));
angular.module('angular-legacy').directive('survey', downgradeComponent({ component: SurveyDemo }));
angular.module('angular-legacy').directive('editor', downgradeComponent({ component: TextEditor }));
angular.module('angular-legacy').directive('message', downgradeComponent({ component: MessageComponent }));
angular.module('angular-legacy').service('messageService', downgradeInjectable(UpgradePubSubService));
platformBrowser().bootstrapModuleFactory(AngularModuleNgFactory).then(function (ref) {
    var adapter = ref.injector.get(UpgradeModule);
    adapter.bootstrap(document.body, ['angular-legacy']);
});

import {wpControllersModule} from '../../../angular-modules';
import {Component, Input} from '@angular/core';
import {downgradeComponent} from '@angular/upgrade/static';
import {WorkPackageResource} from 'core-app/modules/hal/resources/work-package-resource';

@Component({
  templateUrl: './wp-breadcrumb.html',
  selector: 'wp-breadcrumb',
})
export class WorkPackageBreadcrumbComponent {
  @Input('workPackage') workPackage:WorkPackageResource;
}

wpControllersModule.directive(
  'wpBreadcrumb',
  downgradeComponent({component: WorkPackageBreadcrumbComponent })
);

@Component({
  selector: 'wp-workflow-buttons',
  template: require('!!raw-loader!./wp-workflow-buttons.component.html')
})
export class WpWorkflowButtonsComponent {

  @Input() workPackage:WorkPackageResource;

  public get actions() {
    return this.workPackage.customActions;
  }
}

opUiComponentsModule.directive(
  'wpWorkflowButtons',
  downgradeComponent({component:WpWorkflowButtonsComponent})
);

import {Algorithms} from '../shared-components/algorithms/algorithms';
import {SurveyDemo} from '../shared-components/survey/survey-demo';

import {AngularModuleNgFactory} from './upgrade-module.ngfactory';

declare var angular: any;

angular
  .module('angular-legacy')
  .directive('algorithms', downgradeComponent({component: Algorithms}));
angular
  .module('angular-legacy')
  .directive('survey', downgradeComponent({component: SurveyDemo}));
angular
  .module('angular-legacy')
  .directive('editor', downgradeComponent({component: TextEditor}));

platformBrowser()
  .bootstrapModuleFactory(AngularModuleNgFactory)
  .then(ref => {
    const adapter = ref.injector.get(UpgradeModule) as UpgradeModule;
    adapter.bootstrap(document.body, ['angular-legacy']);
  });