升级 AngularJS1 组件时出现错误“未定义角度”

Question

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

Answer 1

我玩过这个，我设法get it to work。

缺少一些东西。

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');