Angular injector error on component downgrading from v5 or v4 to angularJS

Question

I've created simple angular5 component HelloComponent:

var HelloComponent = function () {
};

HelloComponent.annotations = [
  new ng.core.Component({
    selector: 'hello-world',
    template: 'Hello World!'
  })
];

Next I tried to use this component in my angularJS directive like:

angular.module("app", [])
.directive("helloWorld", ng.upgrade.static.downgradeComponent(HelloComponent))

But on running this script I getting this error:

Error: [$injector:unpr] Unknown provider: $$angularLazyModuleRefProvider <- $$angularLazyModuleRef http://errors.angularjs.org/1.6.5/$injector/unpr?p0=%24%24angularLazyModuleRefProvider%20%3C-%20%24%24angularLazyModuleRef

See simple example with angular 5 and angularJS: http://plnkr.co/edit/dQJ2tgV2MuInT41ucjq1

How to fix this ?

ADDITIONAL INFO

Example for downgrading component from v4 to v1 also exists: https://hackernoon.com/angular-v4-hybrid-upgrade-application-73d5afba1e01

But when I trying to remake my app with this post, im getting another error:

Unknown provider: $$angularInjectorProvider

See example for v4: http://plnkr.co/edit/9Oxy0QeSg1FYve0cjGYw

Same example for v5 returns old error:

Unknown provider: $$angularLazyModuleRefProvider

See example for v5: http://plnkr.co/edit/eZScm8U41mGuuHJMjApV

Answer 1

You need to set dependency to $$UpgradeModule in your app module

Change

angular.module("app", [])
.directive("helloWorld", ng.upgrade.static.downgradeComponent(HelloComponent))

To

var app=angular.module("app", ['$$UpgradeModule']).directive("helloWorld", ng.upgrade.static.downgradeComponent({component:HelloComponent}));

Working plunker