1

我正在尝试将用 AngularJS1 编写的组件升级到 Angular6。在我的示例中，我正在通过扩展放置在文件夹“”下的“ UpgradeComponent ”来为所有现有的 AngularJS1 组件提供包装器。directive-wrappers我已经在本地编写了这个应用程序，它适用于 2 个组件TestDirectiveWrapper和TestDirective2Wrapper.

但是当我包含第三个组件TestDirective3Wrapper时，在加载应用程序时出现控制台错误

angular.min.js:127 Error: [$injector:unpr] http://errors.angularjs.org/1.7.5/$injector/unpr?p0=testDirective3DirectiveProvider%20%3C-%20testDirective3Directive
    at angular.min.js:7
    at angular.min.js:46
    at Object.d [as get] (angular.min.js:43)
    at angular.min.js:46
    at Object.d [as get] (angular.min.js:43)
    at Function.push../node_modules/@angular/upgrade/fesm5/static.js.UpgradeHelper.getDirective (static.js:872)
    at new UpgradeHelper (static.js:869)
    at TestDirective3Wrapper.UpgradeComponent (static.js:1170)
    at new TestDirective3Wrapper (TestDirective3Wrapper.ts:9)
    at createClass (core.js:9296) "<app-root _nghost-c0="">"

在此处输入图像描述

为了在线模拟相同的应用程序，我在 stackblitz 中创建了相同的angularjs指令及其包装器，但在这里我得到了一个不同的错误。

在此处输入图像描述

谁能帮我解决这个问题并让我加载所有 3 个组件？

4

1 回答 1

1

我玩过这个，我设法让它工作。

有一些东西不见了。

  1. 您实际上并未包含 AngularJS 1.x 文件。
  2. 您没有导入原始 AngularJS 应用程序模块文件或任何指令。

一旦我做了这两件事，它就对我有用。

以下是相关代码：

在app.module.ts：

import '../AngularJsApp/app.module'; // added

declare var angular: any; // added

angular
  .module('testApp')
  .directive('appRoot', downgradeComponent({ component: AppComponent }));

在AngularJsApp/app.module.js：

'use strict';

const angular = require('angular'); // added

// Define the `testApp` module
angular.module('testApp', []);

// added these 3 lines
require('./test-directive/test-directive.js');
require('./test-directive2/test-directive2.js');
require('./test-directive3/test-directive3.js');
于 2019-10-05T00:41:24.263 回答