Angular2 (hybrid mode) can't Downgrade Directive to NG1 (ES5)

Question

My problem Is that I'm trying to create an Angular2 attribute directive in ES5 while still in hybrid mode (using UpgradeAdapter). So all Angular2 code is being converted down to NG1.This is done by utilizing UpgradeAdapter's 'downgradeNG2Component' function, but since I'm creating a Directive and not a Component I need to use a 'downgradeNG2Directive function', although it doesn't exist.

But can't you just code it in NG1? -> No I'm porting from angular 1 to 2 and need the code itself to be Angular2

The directive is just a simple autoFocus directive that focuses an element whenever "li-common-auto-focus" is an attribute.

TLDR: I'm wondering if there is a way to convert an Angular2 attribute directive down to NG1 using upgradeAdapter?

Here is the code:

AutoFocus.js

//<example>
//   <file name="index.html">
//     <input class="type-text" type="text" li-common-auto-focus>
//   </file>
// </example>


var autoFocusModule = angular.module('li.directives.common.auto-focus', []);
var liCommonAutoFocus = ng.core
    .Directive({
      selector:"li-common-auto-focus",
      inputs:["ignoreMe"]
    })
    .Class({
      constructor:[ng.core.ElementRef, function(eltRef){
        console.log(eltRef);
        console.log(eltRef.nativeElement);
      }],
      ngAfterViewInit:function(){

      }
 });

autoFocusModule.directive(OBJ.Angular.upgradeAdapter.downgradeNg2Component(liCommonAutoFocus));

init.js

var OBJ = {
  Angular: {
    upgradeAdapter: new ng.upgrade.UpgradeAdapter()
  }
};

bootstrap.js

OBJ.Angular.upgradeAdapter.bootstrap(document.body, ['li.directives.common.auto-focus']);

HTML

<html>
  <head>
    <link rel="stylesheet" href="style.css" />
    <script src="https://code.angularjs.org/1.5.6/angular.min.js"></script>
    <script src="https://code.angularjs.org/2.0.0-beta.8/angular2-polyfills.js"></script>
    <script src="https://code.angularjs.org/2.0.0-beta.8/Rx.umd.min.js"></script>
    <script src="https://code.angularjs.org/2.0.0-beta.8/angular2-all.umd.dev.js"></script>
  </head>

  <body>

    <div>Testing</div>
    <input class="type-text" size="50px" type="text" placeholder="">
    <input class="type-text" size="50px" type="text" placeholder="Should Focus ME" li-common-auto-focus>
    <input class="type-text" size="50px" type="text" placeholder="">


    <script src="init.js"></script>
    <script src="auto-focus.js"></script>
    <script src="bootstrap.js"></script>
  </body>

</html>

score 1 · Answer 1 · answered Mar 24 '17 at 02:44

From my understanding of the UpgradeAdapter code, you could not downgrade an attribute directive. When you downgrade a component the constructed directive have restrict: 'E', https://github.com/angular/angular/blob/f92591054bd4c45026939bcd49fd7e49c32db28a/packages/upgrade/src/common/downgrade_component.ts#L70

An alternative approach is to upgrade the directive refer to the upgrade guide on upgrading a directive. https://angular.io/docs/ts/latest/guide/upgrade.html#!#using-angularjs-component-directives-from-angular-code

Another alternative is to have two versions (NG1 and NG 2) of the same directive side by side, until you have upgrade all the consumer of NG1 version.

Angular2 (hybrid mode) can't Downgrade Directive to NG1 (ES5)

1 Answers1