angularjs 1.6.6 component controller not registered error, how to fix this issue?

Question

I'm using angularjs 1.6.6 - and using gulp.

This is my current codes.
e.g.: AppLayout component

/// app-layout.component.js 
angular.module('app').component('appLayout', {
    templateUrl: 'components/app-layout/app-layout.html',
    controller: 'AppController as $ctrlApp'
  });
  
  
  /// app-layout.controller.js

function AppController($rootScope, $interval) {

  this.timeNow = new Date();

  $interval(function() {
    this.timeNow = new Date();
  }, 1000);
};

// app-layout.html

<div ui-view="" class="main-wrapper"></div>

what's the wrong? I can't see any answers about this.

Answer 1

Try to use 'controllerAs' property instead:

angular.module('app').component('appLayout', {
    templateUrl: 'components/app-layout/app-layout.html',
    controller: AppController,
    controllerAs: '$ctrlApp'
});

Answer 2

If you want to use normal controller syntax, it should be

angular.module('app').component('appLayout', {
    templateUrl: 'components/app-layout/app-layout.html',
    controller: AppController
});

if you need the controller as syntax,

angular.module('app').component('appLayout', {
    templateUrl: 'components/app-layout/app-layout.html',
    controller: 'AppController',
    controllerAs: '$ctrlApp'
  });