title: Why do Angular built-in directives not work on a single component?
body: <p>I'm using</p>
  <ul>
  <li>angular ^9.1.11</li>
  <li>node 12.18.0.</li>
  </ul>
  <p>My issue:</p>
  <p>Built-in directives like <code>ngIf</code> or <code>ngFor</code> are not working, and I know that I have to import <code>CommonModule</code>.</p>
  <p>My scenario:
  I have module, with a router component and three sub components. All components are imported into the module. All components work as expected (<code>*ngIf</code>, <code>*ngFor</code>, ...) except for one (also no errors).</p>
  <p>My component:</p>
  <pre><code>import { Component, OnInit } from '@angular/core';
  
  
  @Component({
    selector: 'app-my-component',
    templateUrl: './my-component.component.html',
    styleUrls: ['./my-component.component.scss'],
  })
  export class MyComponent implements OnInit {
    list = [1,2,4]
    constructor() {}
  
    ngOnInit(): void {}
  }
  </code></pre>
  <p>My template:</p>
  <pre><code>&lt;div class=&quot;container&quot;&gt;
    {{list.length}} // 3
    &lt;div *ngFor=&quot;let item of list&quot;&gt;TEST&lt;/div&gt; // not looping
    &lt;div *ngIf=&quot;true&quot;&gt;TEST&lt;/div&gt; // not showing
  &lt;/div&gt;
  </code></pre>
  <p>I can create a new component which would work like expected and cherrypick my changes into the new component but I would like to know how this could happen. The component did work before and I'm afraid that it might break again in the future even if I create a new one.</p>