VSCode中Angular组件template用require报错，如何配置消除该错误？

问题重现 #

在VSCode里编写Angular组件时，使用require加载模板文件：

@Component({
    selector: 'thing',
    template: require('./thing.html'),
})

会触发如下IDE错误提示：

template must be a string
  Value could not be determined statically.(-991010)
user-permission-groups-list.component.ts(9, 15): Unable to evaluate an invalid expression.

但相同代码在WebStorm中无此错误，想知道VSCode需要调整哪些配置或安装什么扩展来消除这个错误标记。

可行的解决方式 #

• 调整Angular Language Service的检查规则：VSCode对Angular代码的校验主要依赖官方的Angular Language Service扩展，默认静态检查较为严格。可以按以下步骤修改：
  1. 打开VSCode设置（快捷键Ctrl+,）
  2. 搜索angular language service相关设置项
  3. 关闭Angular > Experimental: Strict Templates选项，或者调整Angular > Strict Mode下的静态检查开关，放宽对模板值的静态校验要求
• 给require添加类型断言：在代码里明确告诉TypeScript，require返回的是字符串，以此绕过静态检查：

  template: require('./thing.html') as string,
  

• 改用官方推荐的模板加载方式：如果项目允许，直接使用Angular的templateUrl替代template + require的写法，这也是官方更推荐的用法：

  @Component({
      selector: 'thing',
      templateUrl: './thing.html',
  })
  

补充说明 #

WebStorm自身的代码分析逻辑和VSCode依赖的Angular Language Service不同，对这种动态加载模板的写法兼容性更好，因此不会触发错误提示。上述配置或代码调整都能让VSCode不再将该用法标记为问题。

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