混合Angular 1.x + Angular 6應用程序，包含Angular 1.x中的vanilla JS和TS文件

Question

當AngularJS文件是JS和TS時，我正在嘗試構建混合應用程序。 我似乎無法添加到JS控制器的路由。

我依賴以下示例並執行以下操作：

const statesConfigBlock = ['$stateProvider', $stateProvider => {
  $stateProvider.state('main', {
    url: '/main',
    templateUrl: 'app/components/layout/mainView.html',
    controller: 'mainController as main'
  })
}];
appModuleAngularJS.config(statesConfigBlock);

雖然我有一個mainCtrl.js文件定義為：

var app = angular.module('myApp', []);

(function(app) {
  'use strict';

  app.controller('mainController', [
      function () {
        console.log("blah");

      }]);
})(app);

當我運行應用程序時，我得到：

名稱為“mainController”的控制器未注冊

但是當我在控制台中運行時，我確實看到了它：

angular.module('myApp')._invokeQueue.filter(function(el){
  return el[0] === "$controllerProvider";
}).map(function(el){
  return el[2]["0"];
});

Answer 1

好吧，我想我成功了。 它可能不是最好的解決方案但是這里。

首先，我創建了一個包含模塊聲明的js文件：

appDependencies = [];
app = angular.module('myApp', appDependencies);

所有Angular 1.x控制器和服務都使用全局變量app如下所示：

(function(app) {
  'use strict';

  app.controller('mainController', [
      function () {
        console.log("blah");

      }]);
})(app);

最后，Angular 1.x模塊ts文件使用全局app並向其添加依賴項：

...

declare const app: any;
declare var appDependencies: any;

export const appModuleAngularJS = app;

angular.forEach([
  uiRouter, upgradeModule.name
], module => {
  appDependencies.push(module);
});

...

const statesConfigBlock = ['$stateProvider', $stateProvider => {
  $stateProvider.state('main', {
    url: '/main',
    templateUrl: 'app/components/layout/mainView.html',
    controller: 'mainController as main'
  })
}];
appModuleAngularJS.config(statesConfigBlock);

...

現在， index.html文件中js導入的順序非常重要。 應該首先app減速文件，然后是所有Angular 1.x控制器和服務，然后是轉換為js文件的* .ts文件。

這個解決方案對我有用，但我非常樂意閱讀更好的解決方案。

干杯!