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

10
votes

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

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

3 Answers

2
votes

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

0
votes

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/[email protected]/client/shim.min.js"></script>
    <script src="https://unpkg.com/[email protected]/dist/zone.min.js"></script>
    <script src="https://unpkg.com/[email protected]/bundles/Rx.min.js"></script>
    <script src="https://npmcdn.com/@angular/[email protected]/bundles/core.umd.js"></script>
    <script src="https://npmcdn.com/@angular/[email protected]/bundles/common.umd.js"></script>
    <script src="https://npmcdn.com/@angular/[email protected]/bundles/platform-browser.umd.js"></script>
    <script src="https://npmcdn.com/@angular/[email protected]/bundles/compiler.umd.js"></script>
    <script src="https://npmcdn.com/@angular/[email protected]/bundles/platform-browser-dynamic.umd.js"></script>
    <script src="https://npmcdn.com/@angular/[email protected]/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>
-3
votes

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.