Loading second component causes "The template specified for component SidebarComponent is not a string" : <p>I have just started learning angular and i tried to create a simple dashboard.</p>

<p>I've created 2 componentents, DashboardComponent and SidebarComponent.</p>

<p>Dashboard loads fine, but when i load SidebarComponent i'm getting a error on browser "The template specified for component SidebarComponent is not a string"<a href="https://i.stack.imgur.com/EyaPL.png" rel="noreferrer"><img src="https://i.stack.imgur.com/EyaPL.png" alt="enter image description here"></a></p>

<p>SidebarComponent:</p>

<pre><code>import { Component } from '@angular/core';

@Component({
    selector: 'sidebar-component',
    templateUrl: './sidebar.component.ts',
    styleUrls: ['./sidebar.component.scss']
})
export class SidebarComponent {}
</code></pre>

<p>App.module</p>

<pre><code>import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { DashboardComponent } from './dashboard/dashboard.component';
import { SidebarComponent } from './sidebar/sidebar.component';

@NgModule({
  declarations: [
    AppComponent,
    DashboardComponent,
    SidebarComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }
</code></pre>

<p>Both of them are also loaded in app.component</p>

<pre><code>&lt;sidebar-component&gt;&lt;/sidebar-component&gt;
&lt;dashboard&gt;&lt;/dashboard&gt;
</code></pre>
