angular routing stopped working with ngUpgrade

Question

I am in the process of upgrading AngularJS 1.5.X application to Angular 4.3.0. I managed to successfully bootstrap the application and use Angular components on AngularJS screens until I have to upgrade an AngularJS service to Angular to be used in a Angular component. I had to create a provider as described in upgrade guide and then I started getting errors that AngularJS $injector is undefined.

So I moved the AngularJS bootstrapping logic to AppModule instead of main.ts. After that the error went away but routing has stopped working so ng-view is having no effect.

My code App.Module.ts is as follows:-

 function getSomeService(i: IInjectorService): IConfig {   return
 i.get('someService'); }

 function getScope(i: IInjectorService): angular.IRootScopeService {  
 return i.get('$rootScope'); }

 @NgModule({   
 imports: [
     BrowserModule,
     FormsModule,
     HttpClientModule,
     UpgradeModule   ],   

 declarations: [
     AppComponent,
     RootComponent,
     NavigationHeaderComponent ],   

 providers: [
     {
       provide: '$scope',
       useFactory: getScope,
       deps: ['$injector']
     },
     {
       provide: 'someService',
       useFactory: getService,
       deps: ['$injector']
     }   ],   

   entryComponents: [
     AppComponent,
     RootComponent   ] })

 export class AppModule {  
  constructor(private upgrade: UpgradeModule) {   }

   public ngDoBootstrap(app: ApplicationRef): void {
     this.upgrade.bootstrap(document.documentElement, ['app']);
     app.bootstrap(AppComponent);   }

main.ts

platformBrowserDynamic().bootstrapModule(AppModule);

App.Component.ts

@Component({   selector: 'my-app',   template: `<div class="ng-view"></div>` })   export class AppComponent {}

index.html

   <div>    <my-app></my-app> </div>