Use AngularJS directive in Angular Component : <p>I'm trying to upgrade an angularjs directive to use it my angular component.  I've gotten the hybrid (ng1 + ng2) environment to work.  I can also inject angularjs services in angular and use them in angular components (I actually got this working even with angularjs 1.4.x).</p>

<p>Now I'm trying to use an existing angularjs directive in angular, but not working.</p>

<p>For reference, are some snippets of my codes.</p>

<p><strong>[index.html] (my-app is the Angular 4 root component)</strong></p>

<pre><code>...
&lt;body&gt;
    &lt;div class="banner"&gt;Angular Migration&lt;/div&gt;
    &lt;my-app&gt;Loading...&lt;/my-app&gt;
...
&lt;/body&gt;
...
</code></pre>

<p><strong>[main.ts] (bootstrapping code)</strong></p>

<pre><code>import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { UpgradeModule } from '@angular/upgrade/static';
import { Router } from '@angular/router';
import { AppModule } from './app.module';

platformBrowserDynamic().bootstrapModule(AppModule).then(platformRef =&gt; {
  let upgrade = platformRef.injector.get(UpgradeModule) as UpgradeModule;
  upgrade.bootstrap(document.documentElement, ['sampleApp']);
  platformRef.injector.get(Router).initialNavigation();
});
</code></pre>

<p><strong>[app.module.ts] (Angular 4 module)</strong></p>

<pre><code>import { NgModule, Component } from '@angular/core';
import { HashLocationStrategy, LocationStrategy, CommonModule } from '@angular/common';
import { BrowserModule } from '@angular/platform-browser';
import { UpgradeModule } from '@angular/upgrade/static';
import { RouterModule, Routes, UrlHandlingStrategy } from '@angular/router';

import { HybridUrlHandlingStrategy } from './hybridUrlHandlingStrategy';
import { AppComponent } from './app.component';

export const routes: Routes = [
...
];

@NgModule({
  imports: [
    CommonModule,
    BrowserModule,
    UpgradeModule,
    RouterModule.forRoot([], { useHash: true, initialNavigation: false })
  ],
  providers: [
    { provide: LocationStrategy, useClass: HashLocationStrategy },
    { provide: UrlHandlingStrategy, useClass: HybridUrlHandlingStrategy },
    { provide: 'appService', useFactory: (i: any) =&gt; i.get('appService'), deps: ['$injector'] },
    { provide: 'mdToHtml', useFactory: (i: any) =&gt; i.get('mdToHtml'), deps: ['$injector'] }
  ],
  declarations: [
    AppComponent
  ],
  bootstrap: [ AppComponent ]    
})
export class AppModule {
  ngDoBootstrap() { }
}
</code></pre>

<p><strong>[app.component.ts] (Angular 4 component)</strong></p>

<pre><code>import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `
    &lt;router-outlet&gt;&lt;/router-outlet&gt;
    &lt;div ng-view&gt;&lt;/div&gt;
  `,
})
export class AppComponent { }
</code></pre>

<p><strong>[app.js] (AngularJs app)</strong></p>

<pre><code>'use strict';

angular.module('sampleApp', [
  'ngRoute',
  'app.components.services.appService'
])
  .config(function ($routeProvider) {
    $routeProvider
      .otherwise({
        template: ''
      });
  });
</code></pre>

<p><strong>[myStars.js] (AngularJs directive)</strong></p>

<pre><code>'use strict';

angular.module('app.components.directives.myStars', [])
.controller('MyStarsCtrl', function() {
  console.log("**** in MyStarsCtrl ")
})
.component('myStars', {
  restrict: 'E',
  bindings: {
    count: '=count'
  },
  template: '&lt;div&gt;***** M Y   S T A R S *****&lt;/div&gt;'
});
</code></pre>

<p><strong>[myStars.ts] (an attempt to migrate myStars directive to Angular 4)</strong></p>

<pre><code>import { Directive, ElementRef, Injector, Input, Output, EventEmitter } from '@angular/core';
import { UpgradeComponent } from '@angular/upgrade/static';

@Directive({
  selector: 'my-stars'
})
export class MyStarsDirective extends UpgradeComponent {
  @Input() count: number;
  @Output() clicked: EventEmitter&lt;number&gt;;

  constructor(elementRef: ElementRef, injector: Injector) {
    super('myStars', elementRef, injector);
  }
}
</code></pre>

<p><strong>[test.module.ts] (Angular 4 test module)</strong></p>

<pre><code>import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule, Routes} from '@angular/router';
import { TestComponent } from './test.component';

// importing the new MyStarsDirective)
import { MyStarsDirective } from '../../../components/directives/myStars/myStars';

const thisRoute: Routes = [
    {
        path: 'test/:id',
        component: TestComponent
    }
];

@NgModule({
    declarations: [
        TestComponent,
        MyStarsDirective, // &lt;&lt;&lt;&lt; adding directive here
    ],
    providers: [],
    imports: [
        CommonModule,
        RouterModule.forChild(thisRoute)
    ],
    exports: [
        RouterModule
    ]
})

export class TestModule {}
</code></pre>

<p><strong>[test.component.ts] (Angular 4 test component)</strong></p>

<pre><code>import { Component, Inject, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { FormsModule } from '@angular/forms';
import { HybridUrlHandlingStrategy } from '../../../hybridUrlHandlingStrategy';
import { MyStarsDirective } from '../../../components/directives/myStars/myStars';

@Component({
  templateUrl: './test.component.html'
})
export class TestComponent implements OnInit {
  routeParams: any
  myService: any
  mdToHtml: any

  constructor(
    @Inject('myService') myService: any,
    @Inject('mdToHtml') mdToHtml: (str: string) =&gt; string,
    private activatedRoute: ActivatedRoute
  ) {
    this.myService = myService;
    this.mdToHtml = mdToHtml;
  }
  ngOnInit() {
    this.routeParams = this.activatedRoute.params.subscribe(params =&gt; {
      console.log("params", params['groupId'])
...
  }
  ngOnDestroy() {
    this.routeParams.unsubscribe();
  }
}
</code></pre>

<p><strong>[test.component.html] (Angular 4 html)</strong></p>

<pre><code>...
&lt;my-stars&gt;&lt;/my-stars&gt;      &lt;!-- &lt;&lt;&lt;&lt; using directive here --&gt;
...
</code></pre>

<p>Note: I've also upgrade angularjs version to 1.5 just to make this hybrid app works.</p>

<p>Here's the error when I browser the test component page:</p>

<p><a href="https://i.stack.imgur.com/FLY1H.png" rel="noreferrer"><img src="https://i.stack.imgur.com/FLY1H.png" alt="enter image description here"></a></p>

<p>Any help would be greatly appreciated.</p>

<p>Thanks.</p>
