<ul dir="auto">
<li>Version: 2.0.0-beta.7</li>
</ul>
<p dir="auto">I'm trying to create a project that uses ES6 style components with Webpack and Babel.</p>
<p dir="auto"><strong>.babelrc</strong><br>
<code class="notranslate">{ "presets": ["es2015"], "plugins": [ "angular2-annotations", "transform-flow-strip-types" ] }</code></p>
<p dir="auto">This works fine if I only reference components that are defined somewhere within my project's main directory or a sub-directory. For instance, I've successfully created an <strong>App</strong> and <strong>MyButton</strong> component, and <strong>App</strong> can import and use <strong>MyButton</strong> just fine. However, if I create a duplicate project, transpile it's src with the same Babel configuration, and attempt to import the duplicate <strong>Mybutton</strong> into the original project's <strong>App</strong> component, I get obscure errors. I've also tried to import the duplicate <strong>MyButton</strong> component without transpiling via Babel. This should work, as it is identical, but I still get errors...</p>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://cloud.githubusercontent.com/assets/5278555/13408763/1cec0234-def5-11e5-8707-9fe92d779a72.png"><img src="https://cloud.githubusercontent.com/assets/5278555/13408763/1cec0234-def5-11e5-8707-9fe92d779a72.png" alt="image" style="max-width: 100%;"></a></p>
<p dir="auto">I'm using webpack-dev-server to serve a basic bundle, and I've brought in what I believe to be the minimum necessary Angular2 dependencies in my index file.</p>
<p dir="auto"><strong>index.js</strong></p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="import 'angular2/bundles/angular2-polyfills';
import 'rxjs';

import { bootstrap } from 'angular2/platform/browser';
import App from './components/App/App';

bootstrap(App);"><pre class="notranslate"><code class="notranslate">import 'angular2/bundles/angular2-polyfills';
import 'rxjs';

import { bootstrap } from 'angular2/platform/browser';
import App from './components/App/App';

bootstrap(App);
</code></pre></div>
<p dir="auto"><strong>MyButton.js</strong></p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="import { Component } from 'angular2/core';

class MyButton {
}

export default Component({
  selector: 'my-button',
  template: `
    &lt;div
      class=&quot;my-button&quot;
      (click)=&quot;onClick()&quot;&gt;
      {{label}}
    &lt;/div&gt;
  `,
  inputs: ['label', 'onClick'],

})(MyButton);"><pre class="notranslate"><code class="notranslate">import { Component } from 'angular2/core';

class MyButton {
}

export default Component({
  selector: 'my-button',
  template: `
    &lt;div
      class="my-button"
      (click)="onClick()"&gt;
      {{label}}
    &lt;/div&gt;
  `,
  inputs: ['label', 'onClick'],

})(MyButton);
</code></pre></div>
<p dir="auto"><strong>App.js</strong></p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="// This import works 
import MyButton from '../MyButton/MyButton';

// This import doesn't work
// import { MyButton } from '../../../../uxt/lib/components/MyButton/MyButton';

import MyList from '../MyList/MyList';
import { Component } from 'angular2/core';
import { HTTP_PROVIDERS, Http } from 'angular2/http';

export class App {
  constructor(http: Http) {
    this.loadData = this.loadData.bind(this);
    this.clearData = this.clearData.bind(this);
    this.http = http;
    this.items = [];
  }
  setItems() {
    this.http.get('http://jsonplaceholder.typicode.com/posts').subscribe(res =&gt; {
      this.items = res.json();
    });
  }
  loadData() {
    this.setItems();
  }
  clearData() {
    this.items = [];
  }
}

export default Component({
  directives: [MyButton, MyList],
  providers: [HTTP_PROVIDERS],
  selector: 'my-app',
  template: `
    &lt;my-button
      label=&quot;Load Data&quot;
      [onClick]=&quot;loadData&quot;&gt;
    &lt;/my-button&gt;
    &lt;my-button
      label=&quot;Clear Data&quot;
      [onClick]=&quot;clearData&quot;&gt;
    &lt;/my-button&gt;
    &lt;my-list
      [items]=&quot;items&quot;&gt;
    &lt;/my-list&gt;
  `,
})(App);"><pre class="notranslate"><code class="notranslate">// This import works 
import MyButton from '../MyButton/MyButton';

// This import doesn't work
// import { MyButton } from '../../../../uxt/lib/components/MyButton/MyButton';

import MyList from '../MyList/MyList';
import { Component } from 'angular2/core';
import { HTTP_PROVIDERS, Http } from 'angular2/http';

export class App {
  constructor(http: Http) {
    this.loadData = this.loadData.bind(this);
    this.clearData = this.clearData.bind(this);
    this.http = http;
    this.items = [];
  }
  setItems() {
    this.http.get('http://jsonplaceholder.typicode.com/posts').subscribe(res =&gt; {
      this.items = res.json();
    });
  }
  loadData() {
    this.setItems();
  }
  clearData() {
    this.items = [];
  }
}

export default Component({
  directives: [MyButton, MyList],
  providers: [HTTP_PROVIDERS],
  selector: 'my-app',
  template: `
    &lt;my-button
      label="Load Data"
      [onClick]="loadData"&gt;
    &lt;/my-button&gt;
    &lt;my-button
      label="Clear Data"
      [onClick]="clearData"&gt;
    &lt;/my-button&gt;
    &lt;my-list
      [items]="items"&gt;
    &lt;/my-list&gt;
  `,
})(App);
</code></pre></div>
<p dir="auto">As of 1.14-dev.7.0 Dart SDK ships a way to suppress dartdocs for chosen parts of the code via a special <code class="notranslate">&lt;nodoc&gt;</code> comment. We should use it to suppress docs for duplicates caused by reexporting.</p>