<p dir="auto">Angular 2 is a great piece of software, but its biggest problem is that it's overly verbose. Has implicitly requesting a component's sibling template/css been discussed?</p>
<p dir="auto">component<br>
- component.js<br>
- component.html<br>
- component.css</p>
<p dir="auto">I know it's less explicit, but it would encourage a standard pattern for organizing components. I think you're going to lose a lot of people with the verbosity as is. Unless we're going to go full hog and start writing CSS directly in our components, using an inline template string is an awful anti-pattern IMO.</p>
<p dir="auto">I'm using <a href="https://github.com/mgechev/angular2-seed">angular2-seed</a> and throughout my project each component has <code class="notranslate">html</code> and <code class="notranslate">css</code> file with the same name as component <code class="notranslate">ts</code> file.</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="├── about
│   ├── about.html
│   ├── about.ts
│   └── about.css"><pre class="notranslate"><code class="notranslate">├── about
│   ├── about.html
│   ├── about.ts
│   └── about.css
</code></pre></div>
<p dir="auto">where component <code class="notranslate">ts</code> file is:</p>
<div class="highlight highlight-source-ts notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="import {Component} from 'angular2/angular2';

@Component({
  selector: 'about',
  templateUrl: './components/about/about.html',
  styleUrls: ['./components/about/about/about.css']
})
export class About {}"><pre class="notranslate"><span class="pl-k">import</span> <span class="pl-kos">{</span><span class="pl-smi">Component</span><span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">'angular2/angular2'</span><span class="pl-kos">;</span>

@<span class="pl-smi">Component</span><span class="pl-kos">(</span><span class="pl-kos">{</span>
  <span class="pl-c1">selector</span>: <span class="pl-s">'about'</span><span class="pl-kos">,</span>
  <span class="pl-c1">templateUrl</span>: <span class="pl-s">'./components/about/about.html'</span><span class="pl-kos">,</span>
  <span class="pl-c1">styleUrls</span>: <span class="pl-kos">[</span><span class="pl-s">'./components/about/about/about.css'</span><span class="pl-kos">]</span>
<span class="pl-kos">}</span><span class="pl-kos">)</span>
<span class="pl-k">export</span> <span class="pl-k">class</span> <span class="pl-smi">About</span> <span class="pl-kos">{</span><span class="pl-kos">}</span></pre></div>
<p dir="auto">Can you make <code class="notranslate">templateUrl</code> and <code class="notranslate">styleUrls</code> to be optional and if either of that field is absent the default value is generated for template/css, but only in case the file with that name exists. I.e.</p>
<div class="highlight highlight-source-ts notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="let file = &quot;'&quot; + &lt;component file name&gt; + '.html'&quot;;
if(hasFile(file)) templateUrl = file; // templateUrl: ['component file name.html']"><pre class="notranslate"><span class="pl-k">let</span> <span class="pl-s1">file</span> <span class="pl-c1">=</span> <span class="pl-s">"'"</span> <span class="pl-c1">+</span> <span class="pl-kos">&lt;</span><span class="pl-smi">component</span> <span class="pl-s1">file</span> <span class="pl-s1">name</span><span class="pl-kos">&gt;</span> <span class="pl-c1">+</span> <span class="pl-s">'.html'</span>"<span class="pl-kos">;</span>
<span class="pl-k">if</span><span class="pl-kos">(</span><span class="pl-en">hasFile</span><span class="pl-kos">(</span><span class="pl-s1">file</span><span class="pl-kos">)</span><span class="pl-kos">)</span> <span class="pl-s1">templateUrl</span> <span class="pl-c1">=</span> <span class="pl-s1">file</span><span class="pl-kos">;</span> <span class="pl-c">// templateUrl: ['component file name.html']</span></pre></div>
<div class="highlight highlight-source-ts notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="let file = &quot;'&quot; + &lt;component file name&gt; + '.html'&quot;;
if(hasFile(file)) styleUrls = file; // styleUrls: ['component file name.css']"><pre class="notranslate"><span class="pl-k">let</span> <span class="pl-s1">file</span> <span class="pl-c1">=</span> <span class="pl-s">"'"</span> <span class="pl-c1">+</span> <span class="pl-kos">&lt;</span><span class="pl-smi">component</span> <span class="pl-s1">file</span> <span class="pl-s1">name</span><span class="pl-kos">&gt;</span> <span class="pl-c1">+</span> <span class="pl-s">'.html'</span>"<span class="pl-kos">;</span>
<span class="pl-k">if</span><span class="pl-kos">(</span><span class="pl-en">hasFile</span><span class="pl-kos">(</span><span class="pl-s1">file</span><span class="pl-kos">)</span><span class="pl-kos">)</span> <span class="pl-s1">styleUrls</span> <span class="pl-c1">=</span> <span class="pl-s1">file</span><span class="pl-kos">;</span> <span class="pl-c">// styleUrls: ['component file name.css']</span></pre></div>
<p dir="auto">Having these fields be optional will save a lot of dummy typings and make components code look clearer.</p>
<p dir="auto">What do you think?</p>