Geek Answers Handbook

Angular injector error when lowering a component from v5 or v4 to angularJS

I created a simple corner component HelloComponent:

var HelloComponent = function () {
};

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

Then I tried to use this component in my angularJS directive, for example:

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

But when I run this script, I get 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 a simple example with angular 5 and angularJS: http://plnkr.co/edit/dQJ2tgV2MuInT41ucjq1

How to fix it?

ADDITIONAL INFORMATION

v4 v1 : https://hackernoon.com/angular-v4-hybrid-upgrade-application-73d5afba1e01

, :

: $$ angularInjectorProvider

. v4: http://plnkr.co/edit/9Oxy0QeSg1FYve0cjGYw

v5 :

: $$ angularLazyModuleRefProvider

. v5: http://plnkr.co/edit/eZScm8U41mGuuHJMjApV

+6
3

$$UpgradeModule

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


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

+1

- . , script.

script, script src.

.

<!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>
0

, , . , , , .

, .

" ", Google, SO, :

AngularJS : $injector: unpr

AngularJS: [$ injector: unpr]

*.js, , .

: [$ injector: unpr] : $routeProvider

Since you get a very similar error in several different versions, it is safe to assume that the same reason exists in all cases. The version is not, therefore the problem. Look at the inclusion of the file, the order of the files, and the initialization of the object — in that order.

-2
source

More articles:


All Articles