How to inject a Controller into state object inside of Config? (ui-router)

Question

Below I'm trying to inject the PlatformCtrl into my $stateProvider object:

app.js

"use strict";
module.exports = angular.module('tickertags', [
    'templateCache',
    'headers',         // headers (platform, view, timespan)
    'tickertags-auth', // authentication / authentication_module.js
    'settings',        // settings
    'tags',            // tags / tags_module.js
    'tickers',         // tickers / tickers_module.js
    'ui.mask',         // https://github.com/angular-ui/ui-mask
    'ui.router',       // https://github.com/angular-ui/ui-router
    'ui.bootstrap'     // https://github.com/angular-ui/bootstrap,
])
.config([
    '$stateProvider',
    '$urlRouterProvider',
    'PlatformCtrl',
function(
    $stateProvider,
    $urlRouterProvider,
    PlatformCtrl) {

//...

const platformHeader = {
    name: 'platformheader',
    templateUrl: "headers/platform/platform_header.html",
    controller: PlatformCtrl,
    controllerAs: "ph",
    transclude: true,
    bindings: {
        ticker: '<',
        startEpoch: '<',
        endEpoch: '<',
        timespan: '<',
        feed_open: '<'
    }
};

$stateProvider
    .state(login)
    .state(password)
    .state(passwordReset)
    .state(settings)
    .state(settingsDefault)
    .state(settingsAlerts)
    .state(platformHeader);

Getting the following error:

Failed to instantiate module tickertags due to: Error: [$injector:unpr] Unknown provider: PlatformCtrl

platform_header_component.js

module.exports = angular
    .module('headers')
    .controller('PlatformCtrl', PlatformCtrl);

PlatformCtrl.$inject = [
    'api',
    '$element'];

function PlatformCtrl(
    api,
    $element) {
    //....

---

What I'm trying to avoid is having to place all my Controller code for each Component in my app.js > config space:

$stateProvider.state('tags', {
    parent: 'tickers',
    url: "/:ticker",
    views: {
      'tagsPanel@': {
        template: '<p>Tags for {{$ctrl.ticker}}</p>',
        controllerAs: '$ctrl',
        bindToController: true,
        controller: function($stateParams) {
          this.$onInit = function() {
            console.info('Tags Panel 2 $onInit');
            this.ticker = $stateParams["ticker"];
          }
        }
      }
    }
  });

^ my app.js would be huge and the Controllers should be modularized anyways.

Answer 1

The first thing is that controllers are not available during config phase. The second thing is that controllers aren't available for DI, they are instantiated with $controller service.

It is

controller: 'PlatformCtrl',
...