组件从 v5 或 v4 降级到 angularJS 时出现 Angular 注入器错误答案

【问题标题】：Angular injector error on component downgrading from v5 or v4 to angularJS组件从 v5 或 v4 降级到 angularJS 时出现 Angular 注入器错误
【发布时间】：2018-05-13 03:58:58
【问题描述】：

我创建了简单的 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))

但在运行此脚本时出现此错误：

错误：[$injector:unpr] 未知提供者：$$angularLazyModuleRefProvider http://errors.angularjs.org/1.6.5/$injector/unpr?p0=%24%24angularLazyModuleRefProvider%20%3C-%20%24%24angularLazyModuleRef

查看 angular 5 和 angularJS 的简单示例：http://plnkr.co/edit/dQJ2tgV2MuInT41ucjq1

如何解决这个问题？

附加信息

还存在将组件从 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

【问题讨论】：

我猜你缺少在你的 AngularJS 模块中注入一些提供者
@JonathanBrizio 似乎问题出在@angular/upgrade，但我仍然不知道如何解决
请提供更多信息以带来帮助！ stackoverflow.com/help/mcve
@JonathanBrizio 看到我更新的问题，够吗？还是我应该添加其他东西？

标签： javascript angularjs angular5

【解决方案1】：

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

Working plunker

【讨论】：

非常感谢您的帮助！
@SergioIvanuzzo 很高兴它有帮助
我试过了，但我在控制台中收到了这个错误：Module '$$UpgradeModule' is not available!。
这个问题解决了吗？我仍然遇到与上述相同的错误：模块'$$UpgradeModule'不可用！ jsfiddle.net/ouuvdzcn/1
@NathanFriend 首先，尝试使用答案中的工作 plnkr 并根据您的需要进行更改。而且您发布的代码信息不足，您可以添加代码示例吗？

【解决方案2】：

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

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

【讨论】：

这不起作用，请参阅我对上面评论的小提琴。

【解决方案3】：

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

好消息是你并不孤单。

出现“未知提供者”错误，根据谷歌返回的大量 SO 答案，是由不正确的初始化或包含的顺序引起的：

AngularJS Error: $injector:unpr Unknown Provider

AngularJS Error: [$injector:unpr] Unknown provider

没有指定 *.js 文件似乎是一个很常见的原因。

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

由于您在多个不同版本中遇到非常相似的错误，因此可以安全地假设在所有情况下都存在相同的原因。版本不是，所以你的问题。查看文件包含、文件顺序和对象初始化 - 按此顺序。

【讨论】：