0

I'm writing a small app using an ES6 approach to creating an AngularJS 1.x app and have the following code in my app.js class:

    import {HomeController} from "./controllers/HomeController";

    class StatesProvider {

       //blah, blah working      

    }

    StatesProvider.$inject = ["$stateProvider", "$urlRouterProvider"];


    var myapp = angular.module("myapp", ["ui.router", "ui.bootstrap"])    
                       .controller("HomeController", HomeController)    
                       .config(StatesProvider);

The problem is that 1st line of code:

import {HomeController} from "./controllers/HomeController";

It's not the syntax but simply just using the 'import' keyword. The second I do I see a warning in VS.NET:

Property or global variable 'angular' is probably never assigned

This is not the real culprit. The minute I run the app I get (2) JS errors:

Unexpected token import

and

Failed to instantiate module myapp due to: Error: [$injector:nomod] Module 'myapp' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.

The 2nd error is really an issue with the 1st error. It has a problem with that import statement. If I remove the import declaration, the Angular app bootstraps just fine and everything works.

As I understand the use of module loading in ES6 using the import statement is native functionality and I do not need a separate module loader (i.e. require.js, etc.). See (Angular and ES modules) from the following for validation: http://blog.thoughtram.io/angularjs/es6/2015/01/23/exploring-angular-1.3-using-es6.html

I need to register my Angular controllers. What am I doing incorrectly that I can't use the import statement to bring make a reference to the outside module?

atconway
  • 20,624
  • 30
  • 159
  • 229
  • 3
    Are you transpiling your code first? Modules aren't usable as they are at the moment other than transpiling them to common js modules. – MinusFour Mar 25 '16 at 22:56
  • @MinusFour - this could be it. I'll admit - I'm a mostly `TypeScript` developer and was revisiting raw JS in ES6 for an experiment. It could be I missed something completely obvious. If you could expand please in an answer of what I need to do, that could solve this. – atconway Mar 26 '16 at 01:27
  • I didn't realize the `import` keyword wasn't yet supported in the newest version of Chrome, etc. – atconway Mar 26 '16 at 01:29
  • 1
    compile your ts code first or add typescript,js in index.html – sdfacre Mar 26 '16 at 04:28

0 Answers0