ASP.NET Core 2+Angular 4运行时出现TS2345类型不兼容错误求助

这个错误其实很好定位，核心问题就是你在app.component.ts的@Component装饰器里，给template属性传了错误的类型值，导致TypeScript编译器（at-loader）抛出类型不兼容的警告。

错误根源 #

Angular的Component装饰器要求template属性的类型必须是string | undefined，但你写成了空对象{}——这两种类型完全不匹配，所以编译器直接报错了。顺带提一句，你的styles属性如果写成{}[]（空对象数组）也是有问题的，它应该是字符串数组类型。

快速解决方案 #

根据你的需求，有两种修正方式：

方式1：使用内联模板

把template的值改成字符串格式，哪怕是空字符串或者实际的HTML内容：

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

@Component({
  selector: 'app-root',
  template: `<div>你的内联模板内容</div>`, // 这里改成字符串格式
  styles: ['h1 { color: #369; }'] // styles也修正为字符串数组
})
export class AppComponent {
  // 组件逻辑代码
}

如果暂时不需要模板内容，也可以直接写成template: ''。

方式2：使用外部模板文件

如果你的模板内容在单独的HTML文件里（比如app.component.html），请改用templateUrl属性替代template：

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html', // 指向外部HTML文件的路径
  styleUrls: ['./app.component.css'] // 也可以用styleUrls指向外部样式文件
})
export class AppComponent {
  // 组件逻辑代码
}

额外提示 #

修正完template的问题后，如果还有其他[at-loader]相关错误，大概率也是类似的类型不匹配问题——检查一下装饰器里的其他属性（比如styles）是否符合Angular的类型要求，把错误的对象类型改成字符串/字符串数组即可。

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