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

I guess that you're missing to inject some provider in your AngularJS module — Jonathan Brizio, Nov 29 '17 at 13:16
@JonathanBrizio it seems issue is in @angular/upgrade, but i still have no idea how to fix — Sergio Ivanuzzo, Nov 29 '17 at 13:48
Please provide more information to bring help! https://stackoverflow.com/help/mcve — Jonathan Brizio, Nov 29 '17 at 19:29
@JonathanBrizio see my updated question, does it enough ? or I should add something else ? — Sergio Ivanuzzo, Nov 29 '17 at 21:29

score 2 · Accepted Answer · answered Dec 08 '17 at 07:31

2

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

answered Dec 08 '17 at 07:31

jitender

10,238
1
18
44

Thanks a lot for your help! – Sergio Ivanuzzo Dec 08 '17 at 07:39
@SergioIvanuzzo glad it helped – jitender Dec 08 '17 at 07:42
1

I tried this, but I get a this error in my console: `Module '$$UpgradeModule' is not available!`. – Nathan Friend Apr 03 '18 at 16:44
1

did this get resolved? I still have the same error as above: Module '$$UpgradeModule' is not available! https://jsfiddle.net/ouuvdzcn/1/ – Code Junkie Apr 09 '18 at 15:54
@NathanFriend first, try to use working plnkr from the answer and change it according to ur needs. And also u have post not enough info about ur code, can u add code example? – Sergio Ivanuzzo Apr 10 '18 at 15:20

score 0 · Answer 2 · answered Dec 08 '17 at 05:50

You are missing to include something. May be you are not providing the correct path for script.

You can create a new script file, add the script files data in it and add the correct path in the src property.

The below code is working perfectly fine for me.

<!DOCTYPE html>
<html ng-app="app">
<head>
    <script data-semver="1.6.5" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.js"></script>
    <script src="https://unpkg.com/core-js@2.4.1/client/shim.min.js"></script>
    <script src="https://unpkg.com/zone.js@0.6.21/dist/zone.min.js"></script>
    <script src="https://unpkg.com/rxjs@5.0.0-beta.12/bundles/Rx.min.js"></script>
    <script src="https://npmcdn.com/@angular/core@5.0.0/bundles/core.umd.js"></script>
    <script src="https://npmcdn.com/@angular/common@5.0.0/bundles/common.umd.js"></script>
    <script src="https://npmcdn.com/@angular/platform-browser@5.0.0/bundles/platform-browser.umd.js"></script>
    <script src="https://npmcdn.com/@angular/compiler@5.0.0/bundles/compiler.umd.js"></script>
    <script src="https://npmcdn.com/@angular/platform-browser-dynamic@5.0.0/bundles/platform-browser-dynamic.umd.js"></script>
    <script src="https://npmcdn.com/@angular/upgrade@5.0.0/bundles/upgrade-static.umd.js"></script>
    <link rel="stylesheet" href="style.css" />
    <!--<script src="../NewFolder8/script.js"></script>-->
    <script>
        var HelloComponent = function () {
        };

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

        angular.module("app", [])
        .directive("helloWorld", ng.upgrade.static.downgradeComponent(HelloComponent))
    </script>
</head>
<body>
    <h1>Hello Plunker!</h1>
    <hello-world></hello-world>
</body>
</html>

this does not work, see my fiddle on the comment above. – Code Junkie Apr 09 '18 at 15:56 — Code Junkie, Apr 09 '18 at 15:56

score -3 · Answer 3 · answered Dec 07 '17 at 21:24

The error is telling you that it does not understand which provider you are talking about. I'm no expert in this area but you need to make sure that a system has been explicitly told which files it is using.

The good news is that you are not alone.

The "unknown provider" error appears, according to a Google which came back with lots of SO answers, to be caused by incorrect initialisation or order of including:

AngularJS Error: $injector:unpr Unknown Provider

AngularJS Error: [$injector:unpr] Unknown provider

Simply failing to specify the *.js file seems to be a really common cause.

Error: [$injector:unpr] Unknown provider: $routeProvider

As you are getting a very similar error across multiple different versions, it is safe to assume that the same cause exists in all cases. Version is not, therefore you problem. Look at file inclusion, file order, and object initialization - in that order.

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

3 Answers3