Support using angular2 component into ng-forward component

[david-gang]

Hi all,

I try to use ng-upgrade with a small directive, to see how it works.

        'use strict';
        import {Component} from 'angular2/core';

        @Component({
            "selector": "logo",
            templateUrl: 'components/logo/logo.html',
        })

        export class Logo {
        }

Now i try to inject it into another directive:

    'use strict';
    import {Component} from 'ng-forward';
    import {Logo} from './logo/logo.directive';
    import {getAdapter} from '../../angular_upgrade'; //my wrapper to get an adapter singleton
//
    @Component({
       directives:[Logo],
        providers: [],
        "selector": "topbar",
        templateUrl: 'components/topbar/topbar.html',
    })

    export class Topbar {
    }

Now i get an error

Uncaught TypeError: TypeError while analyzing Component 'Topbar' directives. Invalid Providers: please make sure all providers are an Injectable(), Component(), Directive(), a >Provider, or a module string. Here's the invalid values: function Logo() { }

When i try to downgrade the component

directives:[getAdapter().downgradeNg2Component(Logo)],

i get an error:

Uncaught TypeError: TypeError while analyzing Component 'Topbar' directives. Invalid Providers: please make sure all providers are an Injectable(), Component(), Directive(), a > Provider, or a module string. Here's the invalid values: function directiveFactory(protoViewRefMap, viewManager, parse) { var protoView = protoViewRefMap[info.selector]; if (!protoView) throw new Error('Expecting ProtoViewRef for: ' + info.selector); var idCount = 0; return { restrict: 'E', require: constants_1.REQUIRE_INJECTOR, link: { post: function (scope, element, attrs, parentInjector, transclude) { var domElement = element[0]; var facade = new downgrade_ng2_adapter_1.DowngradeNg2ComponentAdapter(idPrefix + (idCount++), info, element, attrs, scope, parentInjector, parse, viewManager, protoView); facade.setupInputs(); facade.bootstrapNg2(); facade.projectContent(); facade.setupOutputs(); facade.registerCleanup(); } } }; }

What is wrong here?

[david-gang]

The problem is that

_writers.providerStore.has('name', a)

The function is not in the provider store as it is not part of ng-forward or a ng1 module.

Is there a nice way to support this?

I could theoretically register this as a ng1 directive with a string and inject the string but this is really ugly.

[david-gang]

In a more general way i would like to know how to inject from angular2 to ng-forward and vice versa meaning:

• how do i inject a ng-forward directive, service to angular2
• how do i inject an angular2 directive, service to ng-forward

[timkindberg]

@david-gang this is some good research! Thanks for doing this.

So the ng2 component was successfully downgraded, we can see the ng1 DDO that the adapter created. We just need to figure out how to get that output over to something that ng-forward wants which I'm not sure if that is possible but it certainly looks like it might be. However, that is gonna be a little while.

Both @MikeRyan52 and I have been busy with other things for the last 2 weeks that's why there's been no movement in a bit. I plan to start working on ng-forward again maybe around my holiday break and certainly after the new year.