<h3 dir="auto">Bug Report or Feature Request (mark with an <code class="notranslate">x</code>)</h3>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="- [x ] bug report -&gt; please search issues before submitting
- [ ] feature request"><pre class="notranslate"><code class="notranslate">- [x ] bug report -&gt; please search issues before submitting
- [ ] feature request
</code></pre></div>
<p dir="auto">Output from: <code class="notranslate">ng --version</code>.<br>
"@angular/compiler-cli": "4.0.2",</p>
<p dir="auto">node v7.9.0<br>
macOS ( Sierra?)</p>
<p dir="auto">Simple steps to reproduce this bug.<br>
Please include: commands run, packages added, related code changes.<br>
A link to a sample repo would help too.</p>
<p dir="auto">following the steps here <a href="https://angular.io/docs/ts/latest/cookbook/aot-compiler.html" rel="nofollow">https://angular.io/docs/ts/latest/cookbook/aot-compiler.html</a><br>
this command is run:<br>
node_modules/.bin/ngc -p tsconfig-aot.json</p>
<h3 dir="auto">The log given by the failure.</h3>
<p dir="auto">Error: Expected 'styleUrls' to be an array of strings.<br>
at assertArrayOfStrings (/Users/xxxxx/xxxxx/xxxxx/xxxxx/node_modules/@angular/compiler/bundles/compiler.umd.js:3361:19)<br>
at CompileMetadataResolver.getNonNormalizedDirectiveMetadata (/Users/xxxxx/xxxxx/xxxxx/xxxxx/node_modules/@angular/compiler/bundles/compiler.umd.js:13786:13)<br>
at CompileMetadataResolver._getEntryComponentMetadata (/Users/xxxxx/xxxxx/xxxxx/xxxxx/node_modules/@angular/compiler/bundles/compiler.umd.js:14484:45)<br>
at /Users/xxxxx/xxxxx/xxxxx/xxxxx/node_modules/@angular/compiler/bundles/compiler.umd.js:14470:48<br>
at Array.forEach (native)<br>
at CompileMetadataResolver._getEntryComponentsFromProvider (/Users/xxxxx/xxxxx/xxxxx/xxxxx/node_modules/@angular/compiler/bundles/compiler.umd.js:14469:30)<br>
at /Users/xxxxx/xxxxxx/xxxxx/frontend/node_modules/@angular/compiler/bundles/compiler.umd.js:14433:83<br>
at Array.forEach (native)<br>
at CompileMetadataResolver._getProvidersMetadata (/Users/xxxxxxx/xxxxxx/xxxxxxx/xxxxxx/node_modules/@angular/compiler/bundles/compiler.umd.js:14397:19)<br>
at /Users/xxxxxx/xxxxxxxxx/xxxxxxx/xxxxxx/node_modules/@angular/compiler/bundles/compiler.umd.js:14399:23<br>
Compilation failed</p>
<h3 dir="auto">Desired functionality.</h3>
<p dir="auto">it should work</p>
<h3 dir="auto">Mention any other details that might be useful.</h3>
<p dir="auto">I am using angular 4.0.2 and it's components</p>
<p dir="auto">I posted this here in the repo for angular-cli but I don't think it belongs there.</p>
<p dir="auto"><a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="222512165" data-permission-text="Title is private" data-url="https://github.com/angular/angular-cli/issues/6002" data-hovercard-type="issue" data-hovercard-url="/angular/angular-cli/issues/6002/hovercard" href="https://github.com/angular/angular-cli/issues/6002">angular/angular-cli#6002</a></p>
<p dir="auto"><strong>I'm submitting a ...</strong>  (check one with "x")<br>
[x ] bug report =&gt; search github for a similar issue or PR before submitting<br>
[x] feature request</p>
<p dir="auto">I intentionally create a duplicate from my issue <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="183599206" data-permission-text="Title is private" data-url="https://github.com/angular/angular/issues/12357" data-hovercard-type="issue" data-hovercard-url="/angular/angular/issues/12357/hovercard" href="https://github.com/angular/angular/issues/12357">#12357</a> , because that one was closed and I didn't get any answer to urgend questions.</p>
<p dir="auto">The problem is, that an input with ngControl in a custom component in a template driven form is not registered to the form.<br>
As Kara adviced, we have to implement ControlValueAccessor interface in the custom component.</p>
<p dir="auto">May be I misundeerstood the concepts, but I have arguments against Karas statement, or at least questions, which are unclear to me:</p>
<ul dir="auto">
<li>We don't talk only about a custom form control. We talk about a custom component in general, which is placed inside a form. Such a component may have nothing to do by itself with model and data, it may only perform structuring tasks or group more then one input elements for a special purpose. Why would I need a controlValueAccessor interface for such a component, if the the component itself is not dealing with data? And how could a controlValueAccessor manage more then one input element in the component?</li>
<li>I thought, the proposal was, to bring full ng1 functionality to forms, when using template driven forms and ngModel. Exiting ng1 applications do not need something like a controlValueAccessor interface - a migration seems to be more complicated as it should be in this point.</li>
</ul>