Error in dependency injection when Angular component is downgraded to angularjs

I am in the process of upgrading angularjs app to angular 5 as outlined in this guide

I have the hybrid app bootstrapped from angular code, that went well. As a next step I created an angular5 component which depends on an angular5 service. I have downgraded the component and declared as directive in angularjs. The problem I see is the service doesn't get injected into the component. If I remove the service dependency from the component it works fine.

Here is my code and the error

Component

@Component({
  selector: 'test-detail',
  template: `
    <h2>Windstorm details! {{test}}</h2>
    <div><label>id: </label>1</div>
  `
})
export class TestComponent { 

  private test:string;
  constructor( private testService:TestService){

  }
  ngOnInit(){
    this.test = this.testService.test();
  }
}

Service:

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

@Injectable()
export class TestService{
    test(){
        return "hello";
    }
}

NG5 Module

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { UpgradeModule } from '@angular/upgrade/static';
import {TestComponent} from '../ng5/directives/test.directive';
import {TestService} from '../ng5/services/test.service';
import { HttpClientModule } from '@angular/common/http';


@NgModule({

  imports: [
    BrowserModule,
    UpgradeModule,
    HttpClientModule
  ],
  declarations:[
    TestComponent
  ] ,
  entryComponents: [
    TestComponent
  ],
  providers:[
    TestService
  ]

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

  }
  ngDoBootstrap() {

    this.upgrade.bootstrap(document.documentElement, ['MyApp']);
  }
}

AngularJS Module:

 angular.module("MyApp").directive('testDetail',  downgradeComponent({ component: TestComponent }) as angular.IDirectiveFactory);

The error I get when launching the page is

uncaught Error: Can't resolve all parameters for TestComponent: (?).
    at syntaxError (compiler.js:485)
    at CompileMetadataResolver.webpackJsonp.529.CompileMetadataResolver._getDependenciesMetadata (compiler.js:15699)
    at CompileMetadataResolver.webpackJsonp.529.CompileMetadataResolver._getTypeMetadata (compiler.js:15534)
    at CompileMetadataResolver.webpackJsonp.529.CompileMetadataResolver.getNonNormalizedDirectiveMetadata (compiler.js:15019)
    at CompileMetadataResolver.webpackJsonp.529.CompileMetadataResolver._getEntryComponentMetadata (compiler.js:15847)
    at compiler.js:15317
    at Array.map (<anonymous>)
    at CompileMetadataResolver.webpackJsonp.529.CompileMetadataResolver.getNgModuleMetadata (compiler.js:15317)
    at JitCompiler.webpackJsonp.529.JitCompiler._loadModules (compiler.js:34404)
    at JitCompiler.webpackJsonp.529.JitCompiler._compileModuleAndComponents (compiler.js:34365)