组件上的角注射器误差从V5或V4降级到AngularJS

我已经创建了简单的Angular5组件HelloComponent：

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

接下来，我尝试在AngularJS指令中使用此组件，例如：

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

但是在运行此脚本时，我会遇到此错误：

错误：[$注射器：UNPR]未知提供商：$$ angularlazymodulerefprovider＆lt; - $$ angularlazymoduleref http://errors.angularjs.org/1.6.5/juljigntor/unpr?p0=$$ angularlazylazylazymodulerefprovider <- $$$$ angularlazylazylazylazymoduleref

参见Angular 5和AngularJS的简单示例：http：//plnkr.co/edit/dqj2tgv2muint41ucjq1

如何解决此问题？

附加信息

将组件从V4降级到V1的示例也存在：https：//hackernoon.com/angular-v4-hybrid-upgrade-upgrade-pradlication-73d55afba1e01

但是，当我试图用这篇文章重制我的应用程序时，我会遇到另一个错误：

未知提供商：$$ angularinjectorProvider

请参见v4的示例：http：//plnkr.co/edit/9oxy0qesg1fyve0cjgyw

V5的同一示例返回旧错误：

未知提供商：$$ angularlazymodulerefprovider

请参见V5的示例：http：//plnkr.co/edit/ezscm8u41mguuhjmjapv

您需要在应用模块中将依赖性设置为 $$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}));

工作plunker

您缺少包含某些内容。可能是您没有为脚本提供正确的路径。

您可以创建一个新的脚本文件，在其中添加脚本文件数据，然后在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>

错误告诉您，它不了解您在谈论哪个提供商。我不是这个领域的专家，但是您需要确保已明确告知系统使用哪些文件。

好消息是你并不孤单。

根据一个带有许多SO答案的Google，出现了"未知提供商"错误，是由不正确的初始化或顺序引起的：

angularjs错误：$注射器：UNPR未知提供商

angularjs错误：[$ inextor：unpr]未知提供商

简单地指定 *.js文件似乎是一个真正常见的原因。

错误：[$注射器：unpr]未知提供商：$ ruteprovider

当您在多个不同版本上遇到非常相似的错误时，可以肯定地假设在所有情况下都存在相同的原因。版本不是，因此您有问题。查看文件包含，文件订单和对象初始化 - 以该顺序。

相关内容

最新更新

热门标签：