Angular + ES6 modules: controller function undefined

Question

I'm struggling with my first use of jspm, and need a quick point in the right direction. (I've loaded ES6 classes before but only as part of concatenated files.)

This is an extract of my bootstrapping code

import angular from 'angular';
import 'angular-ui-router';
import AppController from './app.ctrl';

angular.module("af2015App", ["ui.router"])
.controller("appController", AppController)

and here is app.ctrl.js

'use strict';

class AppController {
    constructor() {
        console.log("AppController");
    }
}

export { AppController }

And I have this in my html:

<div ng-app="af2015App" ng-controller="appController as app" class="app">

And this is the error I get.

Error: [ng:areq] Argument 'appController' is not a function, got undefined
http://errors.angularjs.org/1.4.3/ng/areq?p0=appController&p1=not%20a%20function%2C%20got%20undefined
    at REGEX_STRING_REGEXP (VM235 angular.js:71)
    at assertArg (VM235 angular.js:1773)
    at assertArgFn (VM235 angular.js:1783)
    at VM235 angular.js:8978
    at setupControllers (VM235 angular.js:8040)
    at nodeLinkFn (VM235 angular.js:8080)
    at compositeLinkFn (VM235 angular.js:7544)
    at publicLinkFn (VM235 angular.js:7419)
    at VM235 angular.js:1638
    at Scope.parent.$get.Scope.$eval (VM235 angular.js:15849)

Looking at the capitalisation I can see this is coming from the parsing of the html, but I just can't see what I have done wrong. I'm also getting this error for another controller loaded by ui-router.

Answer 1

You need to use a default export in your controller file:

export default AppController;

Alternatively, you can import by name (without changes to the controller):

import { AppController } from './app.ctrl';