升级 AngularJS1 组件时出错 'angular is not defined'

Question

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

Answer 1

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

缺少一些东西。

您实际上并未包含 AngularJS 1.x 文件。
您没有导入原始 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');

升级 AngularJS1 组件时出错 'angular is not defined'

Error 'angular is not defined' while upgrading AngularJS1 component

angularjs

angular

ng-upgrade

angular-upgrade