<p dir="auto"><strong>I'm submitting a ...</strong>  (check one with "x")</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="[ ] bug report =&gt; search github for a similar issue or PR before submitting
[*] feature request
[ ] support request =&gt; Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question"><pre class="notranslate"><code class="notranslate">[ ] bug report =&gt; search github for a similar issue or PR before submitting
[*] feature request
[ ] support request =&gt; Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question
</code></pre></div>
<p dir="auto"><strong>Current behavior</strong><br>
The developer needs to think on three different options (imports, declares or providers) for deciding where to put the related code.</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="@NgModule({
  imports:      [ CommonModule, FormsModule ],
  declarations: [ ContactComponent, HighlightDirective, AwesomePipe ],
  exports:      [ ContactComponent ],
  providers:    [ ContactService ]
})
export class ContactModule { }"><pre class="notranslate"><code class="notranslate">@NgModule({
  imports:      [ CommonModule, FormsModule ],
  declarations: [ ContactComponent, HighlightDirective, AwesomePipe ],
  exports:      [ ContactComponent ],
  providers:    [ ContactService ]
})
export class ContactModule { }
</code></pre></div>
<p dir="auto"><strong>Expected/desired behavior</strong><br>
Use a single attribute (e.g.: 'imports') to simplify the way things should be imported by a module. The framework should be smart enough to detect (at runtime) the type of each imported entry (if required).</p>
<p dir="auto"><strong>Reproduction of the problem</strong><br>
If the current behavior is a bug or you can illustrate your feature request better with an example, please provide the steps to reproduce and if possible a minimal demo of the problem via <a href="https://plnkr.co" rel="nofollow">https://plnkr.co</a> or similar (you can use this template as a starting point: <a href="http://plnkr.co/edit/tpl:AvJOMERrnz94ekVua0u5" rel="nofollow">http://plnkr.co/edit/tpl:AvJOMERrnz94ekVua0u5</a>).</p>
<p dir="auto"><strong>What is the expected behavior?</strong></p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="@NgModule({
  imports:      [ CommonModule, FormsModule,                     
                  ContactComponent, HighlightDirective, AwesomePipe,
                  ContactService]
  exports:      [ ContactComponent ]
})
export class ContactModule { }"><pre class="notranslate"><code class="notranslate">@NgModule({
  imports:      [ CommonModule, FormsModule,                     
                  ContactComponent, HighlightDirective, AwesomePipe,
                  ContactService]
  exports:      [ ContactComponent ]
})
export class ContactModule { }
</code></pre></div>
<p dir="auto"><strong>What is the motivation / use case for changing the behavior?</strong><br>
Simplify. Less code to think about, less code to write, and less code to maintain.</p>
<p dir="auto"><strong>Please tell us about your environment:</strong></p>
<ul dir="auto">
<li><strong>Angular version:</strong> 2.0.0-rc.5</li>
<li><strong>Browser:</strong> [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]</li>
<li><strong>Language:</strong> [all | TypeScript X.X | ES6/7 | ES5]<br>
TypeScript</li>
</ul>
<p dir="auto">i have tried</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="import template from &quot;./home.html&quot;"><pre class="notranslate"><code class="notranslate">import template from "./home.html"
</code></pre></div>
<p dir="auto">but it makes some misstakes when i compiled with browserify,what the errors are:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="TypeScript error: src/app/pages/home/home.ts(8,22): Error TS2307: Cannot find module './home.html'."><pre class="notranslate"><code class="notranslate">TypeScript error: src/app/pages/home/home.ts(8,22): Error TS2307: Cannot find module './home.html'.
</code></pre></div>
<p dir="auto">how to solve it ?thanks</p>