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

Question

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

但是在运行这个脚本上我得到了这个错误：

Error: [$injector:unpr] Unknown provider: $$angularLazyModuleRefProvider <- $$angularLazyModuleRef 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

但是当我尝试用这个 post 重新制作我的应用程序时，我收到另一个错误：

Unknown provider: $$angularInjectorProvider

参见 v4 示例：http://plnkr.co/edit/9Oxy0QeSg1FYve0cjGYw

v5 的相同示例 returns 旧错误：

Unknown provider: $$angularLazyModuleRefProvider

查看 v5 示例：http://plnkr.co/edit/eZScm8U41mGuuHJMjApV

Answer 1

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

好消息是你并不孤单。

出现 "unknown provider" 错误，根据返回大量 SO 答案的 Google，是由不正确的初始化或包含的顺序引起的：

AngularJS Error: $injector:unpr Unknown Provider

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

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

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

Answer 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>

Answer 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}));

Working plunker

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

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

javascript

angularjs

angular5