dormd

import { NgModule, forwardRef } from '@angular/core';
import { UpgradeAdapter } from '@angular/upgrade';
import { BrowserModule } from '@angular/platform-browser';

export const upgradeAdapter = new UpgradeAdapter(forwardRef(() => AppModule));

@NgModule({
  imports: [
    BrowserModule
  ],

dormd

import { upgradeAdapter } from './upgrade-adapter.old.ts';

upgradeAdapter.bootstrap(document.body, ['myApp'], { strictDi: true });

dormd

System.config({
  map: {
    '@angular/upgrade/static': 'npm:@angular/upgrade/bundles/upgrade-static.umd.js'
  }
});

dormd

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { UpgradeModule } from '@angular/upgrade/static';

@NgModule({
  imports: [
    BrowserModule,
    UpgradeModule
  ],
  bootstrap: []

dormd

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

platformBrowserDynamic().bootstrapModule(AppModule).then(platformRef => {
  const upgrade = platformRef.injector.get(UpgradeModule) as UpgradeModule;
  upgrade.bootstrap(document.body, ['myApp'], { strictDi: true });
});

dormd

import { FactoryProvider } from '@angular/core';

export interface IComponentUpgradeOptions {
    inputs?: string[],
    outputs?: string[]
}

export interface IHybridHelper {
    downgradeComponent(moduleName: string, componentSelector: string, componentClass: any, options?: IComponentUpgradeOptions): IHybridHelper,
    downgradeProvider(moduleName: string, providerName: string, providerClass: any): IHybridHelper,

dormd

import { HybridHelper } from './hybrid-helper.v4';
import { DocumentComponent } from './document-component.v4';

const moduleName = 'document';
angular.module(moduleName, [...]);

HybridHelper.downgradeComponent(moduleName, 'document', DocumentComponent, {
     inputs: ['name', 'size', 'numOfPages', 'content'],
     outputs: ['opened', 'contentChanged', 'closed']
});

dormd

import { Component, Input, Output, EventEmitter } from '@angular/core';

@Component({
    moduleId: module.id,
    selector: 'document',
    template: `...`,
    styles: `...`
})

export class DocumentComponent {

dormd

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { UpgradeModule } from '@angular/upgrade/static';

import { DocumentComponent } from './document-component.v4';

@NgModule({
  declarations: [ DocumentComponent ],
  entryComponents: [ DocumentComponent ],
  imports: [

dormd

import { HybridHelper } from './hybrid-helper.v4';
import { DocumentsService } from './documents-service.v4';

const moduleName = 'document';
HybridHelper.downgradeProvider(moduleName, 'DocumentsService', DocumentsService);