<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></p>

<p dir="auto">i have done all this<br>
import { LOCALE_ID } from '@angular/core';<br>
{ provide: LOCALE_ID, useValue: 'en-ca' }<br>
but console.log(new Date().toLocaleDateString());  is yyyy-m-d<br>
<strong>Expected behavior</strong></p>

<p dir="auto">i want the locale change to 'en-ca'<br>
<strong>Minimal reproduction of the problem with instructions</strong></p>

<p dir="auto"><a href="https://plnkr.co/edit/ulSNTMTMZmORzvkVTvch?p=preview" rel="nofollow">https://plnkr.co/edit/ulSNTMTMZmORzvkVTvch?p=preview</a><br>
<strong>What is the motivation / use case for changing the behavior?</strong></p>

<p dir="auto">change the locale for Date<br>
<strong>Please tell us about your environment:</strong></p>

<p dir="auto">win10</p>
<ul dir="auto">
<li><strong>Angular version:</strong> 2.0.X</li>
</ul>

<p dir="auto">angular 4.1.3</p>
<ul dir="auto">
<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>
</ul>

<p dir="auto">chrome 58.0.3029.110</p>
<ul dir="auto">
<li><strong>Language:</strong> [all | TypeScript X.X | ES6/7 | ES5]<br>
typescript 2.3.1</li>
<li><strong>Node (for AoT issues):</strong> <code class="notranslate">node --version</code> =<br>
node v6.10.1</li>
</ul>
<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"><pre class="notranslate"><code class="notranslate">[X] bug report
</code></pre></div>
<p dir="auto"><strong>Current behavior</strong></p>
<p dir="auto">Setting LOCALE_ID via providers passed to bootstrapModule doesn't work. Locale is en-US. There is a hack that aimed to fix this issue, but it is not working (application_module.ts - provider of LOCALE_ID). It is not working, because the factory doesn't get LOCALE_ID injected, so it cannot forward it.</p>
<p dir="auto">This problem is only in JiT mode. AoT mode works well.</p>
<p dir="auto"><strong>Expected behavior</strong></p>
<p dir="auto">Overriding LOCALE_ID should work in JiT mode.</p>
<p dir="auto"><strong>Minimal reproduction of the problem with instructions</strong></p>
<p dir="auto"><a href="http://plnkr.co/edit/4FK0VfJzJtrf5uzEDNfa?p=preview" rel="nofollow">http://plnkr.co/edit/4FK0VfJzJtrf5uzEDNfa?p=preview</a></p>
<p dir="auto"><strong>What is the motivation / use case for changing the behavior?</strong></p>
<p dir="auto">This usage is described in official i18n guide.</p>
<p dir="auto"><strong>Please tell us about your environment:</strong></p>
<ul dir="auto">
<li><strong>Angular version:</strong> 4.1.3</li>
<li><strong>Browser:</strong> all | Chrome</li>
<li><strong>Language:</strong> TypeScript 2.*</li>
</ul>