angularjs - 加载控制器时出错 - 将 AngularJS1 迁移到 Angular6

Question

我正在尝试将用 AngularJS1 编写的组件升级到 Angular6。在我的示例中，我正在通过扩展放置在文件夹“ directive-wrappers ”下的“ UpgradeComponent ”来为所有现有的 AngularJS1 组件提供包装器。当我尝试添加一些没有任何指令的控制器时，我收到错误消息

Error: [$injector:unpr] Unknown provider: testDirective2DirectiveProvider <- testDirective2Directive
https://errors.angularjs.org/1.7.8/$injector/unpr?p0=testDirective2DirectiveProvider%20%3C-%20testDirective2Directive
    at eval (angular.js:138)
    at eval (angular.js:4924)
    at Object.getService [as get] (angular.js:5084)
    at eval (angular.js:4929)
    at Object.getService [as get] (angular.js:5084)
    at Function.UpgradeHelper.getDirective (upgrade_helper.ts:56)
    at new UpgradeHelper (upgrade_helper.ts:52)
    at TestDirective2Wrapper.UpgradeComponent (upgrade_component.ts:106)
    at new TestDirective2Wrapper (TestDirective2Wrapper.ts:27)
    at createClass (provider.ts:265) "<app-root _nghost-c69="">"

我尝试添加 studentController 和 homePageController，但无法加载它。任何想法为什么我会面临这个问题？ https://stackblitz.com/edit/ng6hybrid-c8h6uv

标签： angularjsangularng-upgradeangular-upgrade

Answer 1

有两个问题需要解决。首先，在 studentController.js 文件中，您正在使用var mainApp = angular.module("testApp", []);重置 AngularJS 模块的语法，并且之前实例化的所有内容都将被删除。

要回答您关于控制器的问题，AngularJS 控制器不能直接使用UpgradeComponent（请参阅https://angular.io/guide/upgrade#using-angularjs-component-directives-from-angular-code）升级，因为它们不是具有模板的组件/指令。这就是为什么您得到的错误（在解决第一个问题之后）是Unknown provider: studentControllerDirectiveProvider <- studentControllerDirective. 它找不到参考 studentController 的指令，因此它正在添加指令以查看是否有任何内容。

要解决这个问题，要么将 AngularJS 中的控制器转换为带有模板的指令，要么将其转换为 AngularJS 中的服务，然后使用UpgradeModule. 请记住，您将需要一个用于此控制器的模板，以便可以将其升级到 Angular。请在下面的 stackblitz 中查看一个工作示例。

https://stackblitz.com/edit/ng6hybrid-zs6waw?file=app%2Fdirective-wrappers%2FstudentControllerWrapper.ts