Upgrading AngularJS component to Angular: No provider for ElementRef exception

Question

We're in the process of getting Angular up and running in our AngularJS app, but I'm facing an issue with mixing upgraded and downgraded components.

Here's the structure of my current problem

The outermost layer is our main application.

The next layer is my new Angular component, which is downgraded, so that I can use it in the AngularJS part of my app. (It's loaded in a ui-router state).

The last layer is an AngularJS component, that has been upgraded to be used in the Angular component.

The last layer is what triggers the issue. When upgrading (following the docs on angular.io), it starts throwing this error:

No provider for ElementRef!

Here are some snippets that might provide the info needed to help out

AngularJS component:

export const ProductComponent: ng.IComponentOptions = {
    template: require('./product.html'),
    controller: ProductController,
    bindings: {
        channel: '<',
        datastandardId: '<',
        productFamily: '<'
    }
};

...

someModule.component('lpProduct', ProductComponent);

Upgraded to Angular:

@Directive({
    selector: 'lp-product-ng2'
})
export class ProductDirective extends UpgradeComponent implements OnInit {
    @Input() productFamily;
    @Input() channel;
    @Input() datastandardId;

    constructor(@Inject('ElementRef') elementRef: ElementRef, @Inject('Injector') injector: Injector) {
        super('lpProduct', elementRef, injector);
    }

    ngOnInit() {
        super.ngOnInit();
    }
}

@NgModule({
    imports: [
        ...
    ],
    exports: [...],
    declarations: [
        ...,
        ProductDirective
    ],
    entryComponents: [...],
    providers: [
        ...
    ]
})
export class CategoryListViewModule {
}

AngularJS component used in the Angular component template

<lp-product-ng2
    *ngIf="selectedProduct"
    [productFamily]="selectedProduct"
    [channel]="channel"
    [datastandardId]="datastandardId">
</lp-product-ng2>

The *ngIf resolves on (click) of another element, so the exception does not throw until the element is in the DOM. If I remove the *ngIf, the exception is thrown immediately, but originating from another part of the code.

I fear that the issue lies within the nesting of components, but I've got no evidence.

Answer 1

it should be :

@Inject(ElementRef)

and

@Inject(Injector)