<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>
Since I updated to Angular 2.4.1 and Angular-CLI beta.24 I get a compiler error which says that I should not use an inline arrow function for the useFactory but rather use an exported function.</p>
<p dir="auto">That is no problem and I can exchange the code but why should I do that? I don't understand why this has changed because before version 2.4.1 it did not show me an error.<br>
The funny thing about it is that the app works without any problem I am just getting this compiler error event tough the code works.</p>
<p dir="auto">That is the way it wants me to do this but this to much unnecessery code, especially when I have more providers which use the <code class="notranslate">useFactory</code>.</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="export function translateFactory() {
    return (http: Http) =&gt; new TranslateStaticLoader(http, '/assets/i18n', '.json')
}

@NgModule({
    ...,
    TranslateModule.forRoot({
        provide: TranslateLoader,
        useFactory: translateFactory,
        deps: [Http]
    })
})"><pre class="notranslate"><code class="notranslate">export function translateFactory() {
    return (http: Http) =&gt; new TranslateStaticLoader(http, '/assets/i18n', '.json')
}

@NgModule({
    ...,
    TranslateModule.forRoot({
        provide: TranslateLoader,
        useFactory: translateFactory,
        deps: [Http]
    })
})
</code></pre></div>
<p dir="auto">There are already issues on a similar topic. <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="174663524" data-permission-text="Title is private" data-url="https://github.com/angular/angular/issues/11262" data-hovercard-type="issue" data-hovercard-url="/angular/angular/issues/11262/hovercard" href="https://github.com/angular/angular/issues/11262">#11262</a> as an example but none of them could answer my core question.</p>
<p dir="auto"><strong>Expected behavior</strong><br>
I expect it to work like in earlier versions.<br>
Where we could use it like in the example below.</p>
<p dir="auto"><strong>Minimal reproduction of the problem with instructions</strong></p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="@NgModule({
    ...,
    TranslateModule.forRoot({
        provide: TranslateLoader,
        useFactory: (http: Http) =&gt; new TranslateStaticLoader(http, '/assets/i18n', '.json'),
        deps: [Http]
    })
})"><pre class="notranslate"><code class="notranslate">@NgModule({
    ...,
    TranslateModule.forRoot({
        provide: TranslateLoader,
        useFactory: (http: Http) =&gt; new TranslateStaticLoader(http, '/assets/i18n', '.json'),
        deps: [Http]
    })
})
</code></pre></div>
<p dir="auto">results in this error</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="ERROR in Error encountered resolving symbol values statically. Function calls are not supported. Consider replacing the function or lambda with a reference to an exported function (position 37:25 in the original .ts file), resolving symbol AppModule in /home/dev/project/frontend/src/app/app.module.ts"><pre class="notranslate"><code class="notranslate">ERROR in Error encountered resolving symbol values statically. Function calls are not supported. Consider replacing the function or lambda with a reference to an exported function (position 37:25 in the original .ts file), resolving symbol AppModule in /home/dev/project/frontend/src/app/app.module.ts
</code></pre></div>
<p dir="auto"><strong>What is the motivation / use case for changing the behavior?</strong><br>
I mostly asking myself why this has changed.<br>
There is nothing in the changelog which helps me.</p>
<p dir="auto">So my questions are:</p>
<ul dir="auto">
<li>In version has this changed?</li>
<li>Why has this changed?</li>
<li>Do I really need to change every factory now or is this a bug and I can expect it to be fixed in a future version?</li>
</ul>
<p dir="auto"><strong>Please tell us about your environment:</strong><br>
Ubuntu 16.04<br>
IntelliJ IDEA 2016.3.2<br>
Angular 2.4.1<br>
Angular-CLI beta.24</p>
<ul dir="auto">
<li>
<p dir="auto"><strong>Browser:</strong><br>
negligible</p>
</li>
<li>
<p dir="auto"><strong>Language:</strong><br>
TypeScript 2.0.10</p>
</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 =&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">If a provider specifies an inline function/arrow function for <code class="notranslate">useFactory</code>, the build fails with the error 'Error encountered resolving symbol values statically. Function calls are not supported. Consider replacing the function or lambda with a reference to an exported function.'</p>
<p dir="auto">For instance, the following breaks:</p>
<div class="highlight highlight-source-ts notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="providers: [
    {
      provide: AuthHttp,
      deps: [Http, RequestOptions],
      useFactory: function (http: Http, options: RequestOptions) {
        return new AuthHttp(new AuthConfig(), http, options);
      }
    }
]"><pre class="notranslate">providers: <span class="pl-kos">[</span>
    <span class="pl-kos">{</span>
      <span class="pl-c1">provide</span>: <span class="pl-smi">AuthHttp</span><span class="pl-kos">,</span>
      <span class="pl-c1">deps</span>: <span class="pl-kos">[</span><span class="pl-smi">Http</span><span class="pl-kos">,</span> <span class="pl-smi">RequestOptions</span><span class="pl-kos">]</span><span class="pl-kos">,</span>
      <span class="pl-en">useFactory</span>: <span class="pl-k">function</span> <span class="pl-kos">(</span><span class="pl-s1">http</span>: <span class="pl-smi">Http</span><span class="pl-kos">,</span> <span class="pl-s1">options</span>: <span class="pl-smi">RequestOptions</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
        <span class="pl-k">return</span> <span class="pl-k">new</span> <span class="pl-smi">AuthHttp</span><span class="pl-kos">(</span><span class="pl-k">new</span> <span class="pl-smi">AuthConfig</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">,</span> <span class="pl-s1">http</span><span class="pl-kos">,</span> <span class="pl-s1">options</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
      <span class="pl-kos">}</span>
    <span class="pl-kos">}</span>
<span class="pl-kos">]</span></pre></div>
<p dir="auto">but changing the notation to ES6 object method shorthand works:</p>
<div class="highlight highlight-source-ts notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="providers: [
    {
      provide: AuthHttp,
      deps: [Http, RequestOptions],
      useFactory(http: Http, options: RequestOptions) {
        return new AuthHttp(new AuthConfig(), http, options);
      }
    }
]"><pre class="notranslate">providers: <span class="pl-kos">[</span>
    <span class="pl-kos">{</span>
      <span class="pl-c1">provide</span>: <span class="pl-smi">AuthHttp</span><span class="pl-kos">,</span>
      <span class="pl-c1">deps</span>: <span class="pl-kos">[</span><span class="pl-smi">Http</span><span class="pl-kos">,</span> <span class="pl-smi">RequestOptions</span><span class="pl-kos">]</span><span class="pl-kos">,</span>
      <span class="pl-en">useFactory</span><span class="pl-kos">(</span><span class="pl-s1">http</span>: <span class="pl-smi">Http</span><span class="pl-kos">,</span> <span class="pl-s1">options</span>: <span class="pl-smi">RequestOptions</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
        <span class="pl-k">return</span> <span class="pl-k">new</span> <span class="pl-smi">AuthHttp</span><span class="pl-kos">(</span><span class="pl-k">new</span> <span class="pl-smi">AuthConfig</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">,</span> <span class="pl-s1">http</span><span class="pl-kos">,</span> <span class="pl-s1">options</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
      <span class="pl-kos">}</span>
    <span class="pl-kos">}</span>
<span class="pl-kos">]</span></pre></div>
<p dir="auto">This is completely bizarre IMHO since the semantics in the above examples are identical.</p>
<p dir="auto"><strong>Expected behavior</strong></p>

<p dir="auto">Should work without issue</p>
<p dir="auto"><strong>Minimal reproduction of the problem with instructions</strong></p>

<p dir="auto">Only occurs when compiling using AoT, not reproducible in a plunkr.</p>
<p dir="auto"><strong>What is the motivation / use case for changing the behavior?</strong></p>

<p dir="auto"><strong>Please tell us about your environment:</strong></p>

<p dir="auto">Windows 7, NPM 3.10.8</p>
<ul dir="auto">
<li>
<p dir="auto"><strong>Angular version:</strong> 2.4.0 (Was not an issue under Angular 2.2.x)</p>
</li>
<li>
<p dir="auto"><strong>Angular-CLI version:</strong> 1.0.0-beta.24</p>
</li>
<li>
<p dir="auto"><strong>Browser:</strong> N/A</p>
</li>
</ul>

<ul dir="auto">
<li>
<p dir="auto"><strong>Language:</strong> TypeScript 2.0.10</p>
</li>
<li>
<p dir="auto"><strong>Node (for AoT issues):</strong> <code class="notranslate">node --version</code> =<br>
6.9.1</p>
</li>
</ul>