在擴展控制器（ES6）中注入模塊會導致未知提供程序錯誤

Question

我有一個控制器類ModalCtrl ，我想創建一個子類ModalCtrlChild extends ModalCtrl 。 問題是，當我嘗試這樣做時，我在ModalCtrl注入的任何模塊中ModalCtrl出現未知的提供程序錯誤。

我使用這個生成器來構建項目，它在后台使用NgInject來注入依賴項，我懷疑那里發生了一些有趣的事情。

ModalCtrl：

export default class ModalCtrl {
  static get UID(){
    return "ModalCtrl"
  }
  ... // all my ModalCtrl methods here

 /* @ngInject */
  constructor(ngDialog, PreoModalType, OutletService, $q, $timeout, VenueService) {
    "ngInject";
    ... // ModalCtrl constructor logic initing variables
  }
}

ModalCtrlChild：

import ModalCtrl from '../../preoModal.controller';

export default class ModalCtrlChild  extends ModalCtrl{
  static get UID(){
    return "modalCtrlChild"
  }

  /* @ngInject */
  constructor() {
    // "ngInject";
    console.log("in super constructor");
    super();
  }
}

錯誤：

Error: [$injector:modulerr] Failed to instantiate module function ModalCtrlChild() due to:
Error: [$injector:unpr] Unknown provider: ngDialog
http://errors.angularjs.org/1.5.3/$injector/unpr?p0=ngDialog

而ngDialog 絕對是進口和工作。 如果delete從ModalCtrlChild extends ModalCtrl我沒有得到任何錯誤，我的代碼運行正常，但我無法獲得我需要的繼承。 任何想法都贊賞。

編輯

在發布問題之前我曾嘗試過eenagy的答案，這也不起作用，因為問題似乎是在子類注入中，而不是在父類的注入中。

sourdoughdetzel，試過你的建議：

1. 從ModalCtrlChild中刪除了注釋和依賴項
2. 從ModalCtrl中刪除了注釋和依賴項，但將它們留在了子項中

得到完全相同的錯誤：

Error: [$injector:modulerr] Failed to instantiate module function PreoModalController_Form() due to:
Error: [$injector:unpr] Unknown provider: ngDialog

我懷疑這與babel構建擴展類的方式有關，並且不允許ngInject做它的工作。 我試圖找到一種在這里進行手動注射的方法，這應該可以解決問題，並證明這是問題，因為我不太了解babel如何解決這個問題。

Answer 1

我的猜測是，當你從子類的構造函數中調用“super（）”時，ngInject沒有做它應該在幕后做的事情。 我在搜索時沒有看到很多關於ngInject的信息，但由於手動調用正在發生的構造函數，它可能會被短路。

如果將依賴項放入ModalCtrlChild控制器並取消注釋“ngInject”字符串，然后將它們傳遞給super（）調用，它是否按預期工作？

Answer 2

錯誤消息實際上告訴您缺少什么。

Unknown provider: ngDialog

您還需要在子類中聲明依賴項。

所以不要這樣

import ModalCtrl from '../../preoModal.controller';

export default class ModalCtrlChild  extends ModalCtrl{
  static get UID(){
    return "modalCtrlChild"
  }

  /* @ngInject */
  constructor() {
    // "ngInject";
    console.log("in super constructor");
    super();
  }
}

您需要傳遞參數。

import ModalCtrl from '../../preoModal.controller';

export default class ModalCtrlChild  extends ModalCtrl{
  static get UID(){
    return "modalCtrlChild"
  }

  /* @ngInject */
  constructor(ngDialog, PreoModalType, OutletService, $q, $timeout, VenueService) {
    // "ngInject";
    console.log("in super constructor");
    super(ngDialog, PreoModalType, OutletService, $q, $timeout, VenueService);
  }
}

ngInject無法知道需要哪些依賴項。 應該怎么知道？ 在現實世界中，可能存在數十個ngDialog的子類，它們與契約相匹配並且可以作為參數傳遞 。 您需要指定需要哪一個 ，以便它可以傳入。

例如，如果你有一個名為ngPopupDialog的ngDialog子類。

和你的示例子類。 可以使用以下代替ngDialog，並匹配super。

import ModalCtrl from '../../preoModal.controller';

export default class ModalCtrlChild  extends ModalCtrl{
  static get UID(){
    return "modalCtrlChild"
  }

  /* @ngInject */
  constructor(ngPopupDialog, PreoModalType, OutletService, $q, $timeout, VenueService) {
    // "ngInject";
    console.log("in super constructor");
    super(ngPopupDialog, PreoModalType, OutletService, $q, $timeout, VenueService);
  }
}