加载第二个组件导致“为组件 SidebarComponent 指定的模板不是字符串”

Question

我刚刚开始学习 Angular，并尝试创建一个简单的仪表板。

我创建了 2 个组件，DashboardComponent 和 SidebarComponent。

仪表板加载正常，但是当我加载 SidebarComponent 时，浏览器出现错误“为组件 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 { }

这两个也是在app.component中加载的

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

Answer 1

错误不言自明……

您指的是.ts 文件而不是.html。

改变这一行：

templateUrl: './sidebar.component.ts'

到：

templateUrl: './sidebar.component.html'