title: Is it possible to dynamically import modules?
body: <p>I have many imports for angular components, and it looks like I can write a function to simplify the import. I just don't know how, but this should be simple. </p>
  
  <p>Sample imports:</p>
  
  <pre><code>import {DashboardComponent} from './app/components/dashboard/dashboard.component';
  angular.module('app.components').component('dashboard', DashboardComponent);
  
  import {HeaderComponent} from './app/components/header/header.component';
  angular.module('app.components').component('header', HeaderComponent);
  </code></pre>
  
  <p>The function below demonstrates what I want to achieve, however I'm missing two concepts to make it work:</p>
  
  <ol>
  <li>How do I put a variable (<code>name</code>) in the <code>{}</code>?</li>
  <li>Can I use an Angular filter in a function like <code>| ucfirst</code> in a JS file?</li>
  </ol>
  
  
  
  <pre><code>componentImporter('header');
  
  function componentImporter(name)
  {
      import {name | ucfirst + 'Component'} from './app/components/'+ name + '/' + name +'.component';
  
      angular.module('app.components').component(name, name | ucfirst + 'Component');
  }
  </code></pre>
  
  <p>Finally an error I run into is:</p>
  
  <blockquote>
    <p>'import' and 'export' may only appear at the top level</p>
  </blockquote>
  
  <p>So can this actually ever work?</p>