Chargement du second composant provoque "Le modèle spécifié pour le composant SidebarComponent n'est pas une chaîne"

Question

Je viens de commencer à apprendre angular et j'ai essayé de créer un tableau de bord simple.

J'ai créé deux composants, DashboardComponent et SidebarComponent.

charges du tableau de bord bien, mais quand je charge SidebarComponent je reçois une erreur sur le navigateur « Le modèle spécifié pour SidebarComponent composant n'est pas une chaîne »

SidebarComponent:

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

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

App.module

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 { } 

les deux d'entre eux sont également chargés dans app.component

<sidebar-component></sidebar-component> 
<dashboard></dashboard> 

Answer 1

L'erreur parle pour lui-même ...

Vous faites référence à un fichier .ts au lieu de .html.

Modifier cette ligne:

templateUrl: './sidebar.component.ts' 

à:

templateUrl: './sidebar.component.html'