title: error Uncaught Error: Template parse errors when declared in app module
body: <p>Not sure what's going on and why this error popped up when I changed where it was being uploaded. Essentially I am changing a component from being only accessible in one component to the whole app and now I get that error.</p>
  
  <h2>app.module.ts</h2>
  
  <pre class="lang-js prettyprint-override"><code>import { DefaultProfilePictureComponent } from '../sharedModules/components/default-profile-picture/default-profile-picture.component'
  
  @NgModule({
    declarations: [
      ...
      DefaultProfilePictureComponent,
      ...
    ],
    ...
  })
  </code></pre>
  
  <h2>default-profile-picture.component.ts</h2>
  
  <pre class="lang-js prettyprint-override"><code>@Component({
    selector: 'app-default-profile-picture',
    templateUrl: './default-profile-picture.component.html',
    styleUrls: ['./default-profile-picture.component.scss'],
  })
  export class DefaultProfilePictureComponent implements OnInit {
    @Input() private lastNames: string;
    @Input() private big: boolean;
    @Input() private contactBox: boolean;
  
    private char1: string;
    private char2?: string;
  
    public constructor() {}
  
    public ngOnInit(): void {
      console.log(this.lastNames.split(' ').length);
      if (this.lastNames.split('').length &gt; 1) {
        this.char1 = this.lastNames.split(' ')[0][0].toUpperCase();
        this.char2 = this.lastNames.split(' ')[1][0].toUpperCase();
      } else {
        this.char1 = this.lastNames.split(' ')[0][0].toUpperCase();
      }
    }
  }
  </code></pre>
  
  <h2>default-profile-picture.component.html</h2>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div class="profile-container" *ngIf="big"&gt;
    &lt;div class="profileImageBig"&gt;{{ char1 }} {{ char2 || '' }}&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <h2>home.page.html</h2>
  
  <pre class="lang-html prettyprint-override"><code>&lt;app-default-profile-picture
    *ngIf="!person.profilePicture"
    lastNames="person.lastNames"
    contactBox="true"
  &gt;&lt;/app-default-profile-picture&gt;
  </code></pre>
  
  <p>anywhere I try and use the component I get the error saying</p>
  
  <blockquote>
    <p>app-default-profile-picture' is not a known element:</p>
  </blockquote>
  
  <p>but if I include it in the <code>home.page.module.ts</code> then I get the error saying that it is declared in two modules. What gives? Thanks! </p>