Angular组件不呈现html，显示html route

Question

我为Angular创建了一个新组件，但我看不到渲染的html。而不是渲染的html，我有通往html的路径。

这些是我的文件夹结构：

这是我创建的名为 server.component.ts ：

的组件

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

@Component({
    selector: 'app-server',
    template: './server.component.html'
})
export class ServerComponent {

}

这是组件的 server.component.html ：

<p>Este es mi nuevo componente!!!</p>

在 app.component.html 中，我包含了我的组件的标记：

<div>
    <input type = "text" [(ngModel)] = "message" />
    <p>{{message}}</p>
    <hr>
    *<app-server></app-server>*
</div>

这是我的 app.module.ts 代码，我导入ServerComponent以便以后使用它：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';


import { AppComponent } from './app.component';
import { ServerComponent } from './server/server.component';

@NgModule({
  declarations: [
    AppComponent,
    ServerComponent
  ],
  imports: [
    BrowserModule,
    FormsModule
   ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

这是我进入浏览器的结果：

我做错了什么？

Answer 1

在组件定义中将template替换为templateUrl，它应该是

@Component({
    selector: 'app-server',
    templateUrl: './server.component.html'
})

Answer 2

在server.component.ts中，您使用了模板属性，该属性要求您在之间传递模板。如果要将链接传递给模板，则需要使用templateUrl属性。