<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
[x] 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
[x] 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"><strong>Expected/desired behavior</strong></p>
<p dir="auto">Reposted from router v3 repo via <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/choeller/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/choeller">@choeller</a></p>
<p dir="auto">With the deprecated Router it was possible to add additional data to a Route-Configuration like this:</p>
<p dir="auto"><a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/RouteConfig/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/RouteConfig">@RouteConfig</a>([<br>
{path: '/about', component: AboutComponent, name: 'About', data: {title :"About us"}},<br>
])<br>
with this information it was possible to do some generic operations when activating the route (e.g. setting the page title via Title-Service. It would be cool to have this possibility again.</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>
<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>
<ul dir="auto">
<li><strong>Angular version:</strong> 2.0.0-rc.X</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 | Dart]</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><br>
Try creating a ngFor look in a component template with an invalid statement (in this case the prefixed <code class="notranslate">let</code> token is missing):</p>
<div class="highlight highlight-text-html-basic notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="            &lt;div *ngFor=&quot;item of items&quot; class=&quot;item&quot;&gt;
              {{ item }} 
            &lt;/div&gt; "><pre class="notranslate">            <span class="pl-kos">&lt;</span><span class="pl-ent">div</span> <span class="pl-c1">*ngFor</span>="<span class="pl-s">item of items</span>" <span class="pl-c1">class</span>="<span class="pl-s">item</span>"<span class="pl-kos">&gt;</span>
              {{ item }} 
            <span class="pl-kos">&lt;/</span><span class="pl-ent">div</span><span class="pl-kos">&gt;</span> </pre></div>
<p dir="auto"><strong>Expected behavior</strong><br>
It would be nice to have a clear error message that informs the user that the ngFor expression is invalid, instead of something like this:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="Error: Template parse errors:
	Can't bind to 'ngFor' since it isn't a known property of 'div'. (&quot;
	            &lt;div [ERROR -&gt;]*ngFor=&quot;item of items&quot; class=&quot;item&quot;&gt;
	              {{ item }}
	            &lt;/div&gt;"><pre class="notranslate"><code class="notranslate">Error: Template parse errors:
	Can't bind to 'ngFor' since it isn't a known property of 'div'. ("
	            &lt;div [ERROR -&gt;]*ngFor="item of items" class="item"&gt;
	              {{ item }}
	            &lt;/div&gt;
</code></pre></div>
<p dir="auto"><strong>Minimal reproduction of the problem with instructions</strong><br>
Just follow the steps above.</p>
<p dir="auto"><strong>What is the motivation / use case for changing the behavior?</strong><br>
NgFor is the most important templating feature in Angular and it looks like this error can show up quite a bit. Let's make this easier on the user.</p>
<p dir="auto"><strong>Please tell us about your environment:</strong><br>
Works anywhere. This is in the angular/angular project.</p>
<ul dir="auto">
<li>
<p dir="auto"><strong>Angular version:</strong> 2.0.X<br>
4.0.0</p>
</li>
<li>
<p dir="auto"><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 ]<br>
Chrome (running on Karma).</p>
</li>
<li>
<p dir="auto"><strong>Language:</strong> [all | TypeScript X.X | ES6/7 | ES5]<br>
TS</p>
</li>
<li>
<p dir="auto"><strong>Node (for AoT issues):</strong> <code class="notranslate">node --version</code> =<br>
This is running in runtime. Not sure how this looks post AOT.</p>
</li>
</ul>