Exception in main.ts when importing components via an index.ts file
<p>I know that this exception:</p>

<blockquote>
  <p>Unexpected directive value '<strong>undefined</strong>' on the View of component '<strong>AppComponent</strong>'</p>
</blockquote>

<p>is quite common, but no other question helped me, since they often refer to circular dependencies or missing <code>export</code> statements. But no fix fits to this problem...</p>

<p>I have a project with the following structure</p>

<pre><code>src/
    myproject/
        components/
        services/
        templates/
        ...
        main.ts
    index.html
    systemjs.config.js
public/
    libs/                   &lt;- required libs, copied from node_modules
    myproject/              &lt;- compiled .ts files and copied resources from /src/myproject
    index.html              &lt;- copied from /src/myproject
    systemjs.config.js      &lt;- copied from /src/myproject
gulpfile.ts
*.json                      &lt;- tsconfig, package, typings, ...
</code></pre>

<p>The process to deploy the project is the following: compile <code>.ts</code> files, output them to <code>/public</code>. Copy all resources (everything but <code>.ts</code> files) to <code>/public</code>. Copy all required libs to <code>/public/libs</code>.</p>

<p>I am using typescript <code>1.9</code>, since I am using the <code>paths</code> option in <code>tsconfig.json</code>. This file contains the following path mapping: </p>

<pre><code>// excerpt from /tsconfig.json
{
    "compilerOptions": {
        // more options
        "paths": {
            "myproject/*": ["./src/myproject/*"]
        }
        // more options
    }
}
</code></pre>

<p>All my Angular2 components are in the folder <code>/src/myproject/components</code> and there is an <code>index.ts</code> file which exports every defined class. This file looks like this:</p>

<pre><code>// /src/myproject/components/index.ts
export * from './app.component';
export * from './a.component';
export * from './b.component';
export * from './c.component';
</code></pre>

<p>The reason for this setup is to be able to have good looking and easy imports. For example, if I need <code>ComponentA</code>, <code>ComponentB</code> and <code>ComponentC</code> (which are defined in <code>/src/myproject/components/{a,b,c}.component.ts</code>), then I can just make the following statement:</p>

<pre><code>// excerpt from /src/myproject/components/app.component.ts
import  { ComponentA, ComponentB, ComponentC } from 'myproject/components';
</code></pre>

<p>This does work very well: I have no issues when compiling, and no issues when accessing it in the browser (<code>systemjs.config.js</code> takes care of the proper resolution)</p>

<p>But there is one exception. If I import the main <code>AppComponent</code> (<code>/src/myproject/components/app.component.ts</code>) in the <code>main.ts</code> file (<code>/src/myproject/main.ts</code>) like this:</p>

<pre><code>// excerpt from /src/myproject/main.ts
import { AppComponent } from 'myproject/components';
</code></pre>

<p>I get the following exception when trying to view myproject in the browser: </p>

<blockquote>
  <p><strong>EXCEPTION</strong>: Unexpected directive value '<strong>undefined</strong>' on the View of component '<strong>AppComponent</strong>'</p>
</blockquote>

<p>However, if I change this import to the following:</p>

<pre><code>// excerpt from /src/myproject/main.ts
import { AppComponent } from 'myproject/components/app.component';
</code></pre>

<p>Everything works as expected. Please note, that the <code>main.ts</code> is the only file where this import does not work. All other imports work like a charm. For example, in <code>AppComponent</code>, like you can see above.</p>

<p>If I would write everything down, this question would be way to large, so please excuse me that I decided to only add a MWE as a GitHub repository. You can get the whole code from:</p>

<p><a href="https://github.com/christiandreher/ang-exc-mwe" rel="nofollow">https://github.com/christiandreher/ang-exc-mwe</a></p>

<p>I also pushed the <code>/public</code> directory. Accessing this with a browser, you should technically get the same error. If you want to build it yourself, you can use <code>gulp clean</code>, <code>tsc</code> (note: <code>gulp build</code> does not work due to a bug in <code>gulp-typescript</code>), <code>gulp resources</code>, <code>gulp libs</code>.</p>

<p><strong>So the question is: Why does every import work, except for the first one in <code>main.ts</code>?</strong> I really like this setup, since I can import everything very conveniently and it just looks good. <strong>Also, I want it consistently</strong>. </p>

<p>I really appreciate any help, since this is a huge question, and to be honest, a <em>not so</em> minimal working example...</p>

<p><strong>Update</strong>: So far I have only received answers on how to fix the exception, but I have supplied a fix for this by myself in the OP. I know how to avoid it, but <strong>I don't want to use relative imports</strong>, I want it constistently everywhere. So <strong>what can I do to fix this one exception? What is the cause of this? If it is not fixable: Why? Who do I have to address for this issue? TypeScript, Angular, ...?</strong></p>

<p><strong>Update 2</strong>: As I still didn't manage to get this to work, I will now start a bounty</p>