import { UpgradeModule } from '@angular/upgrade/static';
import { AppModule } from './app.module';

@NgModule({
  imports: [
    BrowserModule,
    UpgradeModule,
  ],
})
export class AppModule {
  constructor(private upgrade: UpgradeModule) { }
  ngDoBootstrap() {
    this.upgrade.bootstrap(document.body, [AppModule]);
  }
}

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { Ng2AppModule } from './app.ng.module';

platformBrowserDynamic().bootstrapModule(Ng2AppModule);

@Component({
  selector: 'home',
  templateUrl: 'home.html',
  styleUrls: ['home.scss']
})
export class HomeComponent implements OnInit {
  constructor() {}

  ngOnInit() {}
}

@NgModule({
  imports: [SharedModule],
  declarations: [HomeComponent]
})
export class HomeNgModule {}

export const HomeNg1Module = angular.module('myApp.home', []).directive(
  'home',
  downgradeComponent({
    component: HomeComponent
  })
).name;

export const HomeComponent = {
  template: `
        <div class="container">
            This is my home
        </div>        
    `,
  controller: class HomeController {}
};

export const HomeNg1Module = angular.module('myApp.home', []).component(
  'home',
  HomeComponent)
).name;

@Directive({
  selector: 'home'
})
export class UpgradedHomeComponent extends UpgradeComponent {
  @Input() text: string;

  constructor(elementRef: ElementRef, injector: Injector) {
    super('home', elementRef, injector);
  }
}

@NgModule({
  imports: [SharedModule],
  declarations: [UpgradedHomeComponent]
})
export class HomeNgModule {}

@Injectable({ providedIn: 'root' })
export class HeroService {
  constructor(private http: HttpClient) {}
  
  getHeroes() {
    // Getting heroes
  }
}

export const MyModule = angular
  .module('myApp.hero', [])
  .factory('heroService', downgradeInjectable(HeroService)).name;

export class HeroService {
  constructor($http) {
    'ngInject';
    this.$http = $http;
  }

  getHeroes() {
    // Getting heroes
  }
}

export default angular
  .module('myApp.hero', [])
  .service('heroService', HeroService)

export function heroServiceFactory(i) {
  return i.get('heroService');
}

@NgModule({
  imports: [SharedModule],
  declarations: [HeaderComponent],
  providers: [{
    provide: 'heroService',
    useFactory: heroServiceFactory,
    deps: ['$injector']
  },]
})
export class HeroNgModule {}



@Component({
  selector: 'header',
  templateUrl: 'header.html',
  styleUrls: ['header.scss']
})
export class HeaderComponent implements OnInit {
  constructor(
    @Inject('heroService') private heroService
  ) {}

  ngOnInit() {}
}