Angular8组件模板显示路径而非内容问题求助

你不小心把Angular组件里的template和templateUrl搞混啦：

• template是用来直接写内联模板字符串的，比如你如果把HTML代码直接写在反引号里，它才会渲染成页面内容；
• 而当你要引用外部的.html模板文件时，必须用templateUrl属性，Angular才会去加载对应的文件内容。

你现在用template: ./app.component.html``，相当于把这个文件路径当成了普通字符串来渲染，所以浏览器才会显示./app.component.html这串文本，而不是模板里的内容。

修正后的组件代码应该是这样的：

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html', // 把template改成templateUrl
  styles: [
    '.isActive { text-decoration: underline; }',
    '.oddCategory { color: green }'
  ]
})

改完之后重启ng serve，Chrome应该就能正常显示你的模板内容啦！

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