<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="[ x] 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">[ x] 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>
using vs code the type of <code class="notranslate">ElementRef.nativeElement</code> is <code class="notranslate">any</code>.<br>
<strong>Expected behavior</strong><br>
shouldn't the type be <code class="notranslate">Element</code> so we can get code completion and type checking?</p>
<p dir="auto"><strong>Minimal reproduction of the problem with instructions</strong><br>
plnkr won't work because it doesn't do type checking (to my knowledge)</p>
<p dir="auto"><strong>What is the motivation / use case for changing the behavior?</strong><br>
so we can get code completion and type checking</p>
<p dir="auto"><strong>Please tell us about your environment:</strong><br>
windows 10 vs code</p>
<ul dir="auto">
<li>
<p dir="auto"><strong>Angular version:</strong> 2.4.1</p>
</li>
<li>
<p dir="auto"><strong>Browser:</strong> not a browser issue</p>
</li>
<li>
<p dir="auto"><strong>Language:</strong> [all | TypeScript X.X | ES6/7 | ES5]<br>
typescript 2.1.5</p>
</li>
<li>
<p dir="auto"><strong>Node (for AoT issues):</strong> <code class="notranslate">node --version</code> =</p>
</li>
</ul>
<p dir="auto">The current DI system, when compared to something like <a href="https://github.com/google/guice">Guice</a>, has some limitations that large internal clients are finding lacking. Below, when I use the term <code class="notranslate">module</code>, I mean, for Dart at least, a <code class="notranslate">const</code> <code class="notranslate">List</code> of <code class="notranslate">&lt;Binding | Type | List&lt;...&gt;&gt;</code></p>
<p dir="auto">Requests from internal clients:</p>
<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox"> If two or more modules would resolve bindings differently, have an option to warn or throw.</li>
</ul>
<p dir="auto">This would be used to help detect when you may not intend for a binding to be overriden.</p>
<div class="highlight highlight-source-dart notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="const serviceBindings = const [ const Binding(MapsService, toClass: DefaultMapsService) ];
const debugBindings = const [ const Binding(MapsService, toClass: DebugMapsService) ];

// We will (accidentally?) override DefaultMapsService with DebugMapsService.
// In some mode (debug?) we may want to print to console or throw something.
void main() {
  bootstrap(..., [serviceBindings, debugBindings])
}"><pre class="notranslate"><span class="pl-k">const</span> serviceBindings <span class="pl-k">=</span> <span class="pl-k">const</span> [ <span class="pl-k">const</span> <span class="pl-c1">Binding</span>(<span class="pl-c1">MapsService</span>, toClass<span class="pl-k">:</span> <span class="pl-c1">DefaultMapsService</span>) ];
<span class="pl-k">const</span> debugBindings <span class="pl-k">=</span> <span class="pl-k">const</span> [ <span class="pl-k">const</span> <span class="pl-c1">Binding</span>(<span class="pl-c1">MapsService</span>, toClass<span class="pl-k">:</span> <span class="pl-c1">DebugMapsService</span>) ];

<span class="pl-c">// We will (accidentally?) override DefaultMapsService with DebugMapsService.</span>
<span class="pl-c">// In some mode (debug?) we may want to print to console or throw something.</span>
<span class="pl-k">void</span> <span class="pl-en">main</span>() {
  <span class="pl-en">bootstrap</span>(..., [serviceBindings, debugBindings])
}</pre></div>
<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox"> Have a required binding "marker" to remind developers to fill-in implementations or flags.</li>
</ul>
<div class="highlight highlight-source-dart notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="const mapsServicePrefixToken = const OpaqueToken('mapsServicePrefix');

const serviceBindings = const [
  const Binding(MapsService, toClass: DefaultMapsService),
  const RequireBinding(mapsServicePrefixToken, reason: 'Define an API prefix to use MapsService')
];"><pre class="notranslate"><span class="pl-k">const</span> mapsServicePrefixToken <span class="pl-k">=</span> <span class="pl-k">const</span> <span class="pl-c1">OpaqueToken</span>(<span class="pl-s">'mapsServicePrefix'</span>);

<span class="pl-k">const</span> serviceBindings <span class="pl-k">=</span> <span class="pl-k">const</span> [
  <span class="pl-k">const</span> <span class="pl-c1">Binding</span>(<span class="pl-c1">MapsService</span>, toClass<span class="pl-k">:</span> <span class="pl-c1">DefaultMapsService</span>),
  <span class="pl-k">const</span> <span class="pl-c1">RequireBinding</span>(mapsServicePrefixToken, reason<span class="pl-k">:</span> <span class="pl-s">'Define an API prefix to use MapsService'</span>)
];</pre></div>
<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox"> Allow optional typing of <code class="notranslate">token</code>-type bindings to throw earlier</li>
</ul>
<div class="highlight highlight-source-dart notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="const mapsServicePrefixToken = const OpaqueToken&lt;String&gt;('mapsServicePrefix');

const serviceBindings = const [
  const Binding(mapsServicePrefixToken, 5); // Should throw fast in dev-mode
];"><pre class="notranslate"><span class="pl-k">const</span> mapsServicePrefixToken <span class="pl-k">=</span> <span class="pl-k">const</span> <span class="pl-c1">OpaqueToken</span>&lt;<span class="pl-c1">String</span>&gt;(<span class="pl-s">'mapsServicePrefix'</span>);

<span class="pl-k">const</span> serviceBindings <span class="pl-k">=</span> <span class="pl-k">const</span> [
  <span class="pl-k">const</span> <span class="pl-c1">Binding</span>(mapsServicePrefixToken, <span class="pl-c1">5</span>); <span class="pl-c">// Should throw fast in dev-mode</span>
];</pre></div>
<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> <del>Reduce the cost of duplicate/re-binding by resolving bindings, when possible, at build time</del></li>
</ul>
<p dir="auto"><em>This is already done.</em></p>
<div class="highlight highlight-source-dart notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="const serviceBindings = const [
  const Binding(MapsService, toClass: DefaultMapsService)
];

const mapsRenderingBindings = const [
  serviceBindings,
  otherBindings
];

// We are binding two identical `const Binding(MapsService)` at runtime, even though they will resolve
// exactly the same. We could detect this at build time.
void main() {
  bootstrap(..., [serviceBindings, mapsRenderingBindings])
}"><pre class="notranslate"><span class="pl-k">const</span> serviceBindings <span class="pl-k">=</span> <span class="pl-k">const</span> [
  <span class="pl-k">const</span> <span class="pl-c1">Binding</span>(<span class="pl-c1">MapsService</span>, toClass<span class="pl-k">:</span> <span class="pl-c1">DefaultMapsService</span>)
];

<span class="pl-k">const</span> mapsRenderingBindings <span class="pl-k">=</span> <span class="pl-k">const</span> [
  serviceBindings,
  otherBindings
];

<span class="pl-c">// We are binding two identical `const Binding(MapsService)` at runtime, even though they will resolve</span>
<span class="pl-c">// exactly the same. We could detect this at build time.</span>
<span class="pl-k">void</span> <span class="pl-en">main</span>() {
  <span class="pl-en">bootstrap</span>(..., [serviceBindings, mapsRenderingBindings])
}</pre></div>
<p dir="auto">Other related issues (will add to if I create sub-issues):</p>
<ul dir="auto">
<li><a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="96917191" data-permission-text="Title is private" data-url="https://github.com/angular/angular/issues/3251" data-hovercard-type="issue" data-hovercard-url="/angular/angular/issues/3251/hovercard" href="https://github.com/angular/angular/issues/3251">#3251</a> (Makes the current system easier to digest)</li>
</ul>
<p dir="auto">Requires some input by <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/TedSander/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/TedSander">@TedSander</a>, <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/yjbanov/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/yjbanov">@yjbanov</a> if possible before pushing to Misko and Victor :)</p>