Regi Mani
Regi Mani

Reputation: 61

Angular 1.5 ES6 'Controller not function got undefined' error

I am trying to run a simple Angular module in ES6, but getting the "Argument 'HomeController' is not a function, got undefined" error. I am getting the compiled/minified app.min.js from gulp and babel.

Folder Structure

Code is as follows:-

app.js
-------
import PersonService from './services/PersonService';
import HomeController from './controllers/HomeController';
var app = angular.module('myApp', []);
app.service('PersonService', PersonService).controller('HomeController', HomeController);

HomeController.js
-----------------
import PersonService from '../services/PersonService';
function HomeController($scope, PersonService){
    $scope.dept ='Department';  
    PersonService.getPerson().then(function(person) {
        $scope.person = person;
    });
}   
HomeController.$inject = ['$scope','PersonService'];
export {HomeController};

PersonService.js
----------------
import Person from '../model/Person';
class PersonService {
constructor($q) {
    this._$q = $q;
}

getPerson() {
    return this._$q.when(new Person(101, 'Test Person'));
}
}
PersonService.$inject = ['$q'];
export {PersonService};

Person.js
----------
class Person {
  constructor(id, name) {
    this.id=id;
    this.name = name;
  }
}
export { Person };

Any help would be appreciated.. Thanks

Upvotes: 1

Views: 533

Answers (1)

antoinestv
antoinestv

Reputation: 3306

You use a named export export {name1, name2 ...} and then you use a default import import name from ... .

You can't do that.

What you can do:

  1. either import Test from ... with export default Test;
  2. either import {Test} from ... with export {Test};

Note: That is what angular is trying to say to you (he can't create a controller from undefined).

Take a look at: https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Instructions/import https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Instructions/export

Upvotes: 2

Related Questions