Почему в проекте Angular компоненты перестают быть видимыми после компиляции?

Question

При работе с Angular иногда после компиляции мои компоненты или некоторые элементы HTML, которые я пишу в шаблоне приложения, не видны, но если вы проверите страницу, даже если нет ошибок, элементы будут там. Например, это шаблон приложения, который не отображается:

<div 
  class="card card-strong disable-text-selection"
  collapse-on-click
  #cp
  [collapsed]="collapsed"
  [class.collapsed]="cp.collapsed">
  <i class="md-icon collapsible-indicator"></i>
  <div class="collapsible-section"></div>
</div>

Это приложение ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  collapsed = false;
}

Это очень-очень просто, но ничего не происходит

Это еще один пример с компонентом

Шаблон компонента:

<div class="dropdown-menu">
  <form class="px-4 py-3">
    <div class="form-group">
      <label for="email">Username</label>
        <input 
          type="email" 
          class="form-control"
          placeholder="Type your email please"
          id="signInFormEmail">
    </div>
    <div class="form-group">
      <label for="password">Password</label>
      <input 
        type="password" 
        class="form-control"
        id="signInFormPassword"
        placeholder="Type your password please">
    </div>
    <div class="form-control">
      <div class="form-check">
        <input 
          type="checkbox" 
          class="form-check-input"
          id="rememberMe">
        <label 
          for="rememeberMeCheck" 
          class="form-check-label">Remember me
        </label>
      </div>
    </div>
    <button class="btn btn-primary">Sign In</button>
  </form>
  <div class="dropdown-divider"></div>
  <a href="#" class="dropdown-item">New around here? Sign up</a>
  <a href="#" class="dropdown-item">Forgot password?</a>
</div>

Компонент ts:

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'sign-in-form',
  templateUrl: './sign-in-form.component.html',
  styleUrls: ['./sign-in-form.component.css']
})
export class SignInFormComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {
  }

}

Шаблон приложения

<sign-in-form></sign-in-form>

приложение ts

import { Component } from '@angular/core';
import { Form } from "@angular/forms";

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  active = false;
}