title: Why is ES6 import statement causing AngularJS module not to load?
body: <p>I'm writing a small app using an <code>ES6</code> approach to creating an AngularJS 1.x app and have the following code in my <code>app.js</code> class:</p>
  
  <pre><code>    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);
  </code></pre>
  
  <p>The problem is that 1st line of code:</p>
  
  <p><code>import {HomeController} from "./controllers/HomeController";</code></p>
  
  <p>It's not the syntax but simply just using the 'import' keyword. The second I do I see a warning in VS.NET:</p>
  
  <blockquote>
    <p>Property or global variable 'angular' is probably never assigned</p>
  </blockquote>
  
  <p>This is not the real culprit. The minute I run the app I get (2) JS errors:</p>
  
  <blockquote>
    <p>Unexpected token <strong>import</strong></p>
  </blockquote>
  
  <p>and</p>
  
  <blockquote>
    <p>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.</p>
  </blockquote>
  
  <p>The 2nd error is really an issue with the 1st error. It has a problem with that import statement. If I <strong><em>remove</em></strong> the <code>import</code> declaration, the Angular app bootstraps just fine and <em>everything works</em>.</p>
  
  <p>As I understand the use of module loading in <code>ES6</code> using the import statement is native functionality and I do not need a separate module loader (i.e. <code>require.js</code>, etc.). See (Angular and ES modules) from the following for validation: <a href="http://blog.thoughtram.io/angularjs/es6/2015/01/23/exploring-angular-1.3-using-es6.html" rel="nofollow">http://blog.thoughtram.io/angularjs/es6/2015/01/23/exploring-angular-1.3-using-es6.html</a></p>
  
  <p>I need to register my Angular controllers. What am I doing incorrectly that I can't use the <code>import</code> statement to bring make a reference to the outside module?</p>