Angular 12组件selector未渲染内容仅显示模板路径问题咨询

问题原因 #

你在server.component.ts的组件配置中，错误使用template字段声明外部模板路径：

• template字段用于传入内联HTML字符串，Angular会直接把传入的内容当做模板渲染，所以你传入的./server.component.html路径会直接作为文本输出到页面上
• 加载外部HTML模板文件需要使用templateUrl字段

修复方案 #

修改server.component.ts的@Component配置，将template替换为templateUrl即可：

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

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

另外注意删除app.module.ts中第一行末尾多余的enter code here残留字符，避免引发不必要的编译错误。修改完成后重启Angular开发服务，组件即可正常渲染。

内容的提问来源于stack exchange，提问作者MertSonmez