对组件修饰器使用字符串插值失败

Question

我正在将项目更新到最新的Angular 5版本，经过一些版本调整后仍然失败。所以我基于当前版本（@angular/cli 1.5.0，@angular/* 5.0.0）创建了一个全新的角度项目，并开始寻找问题。

事实证明，例如在装饰器中使用字符串插值不再被识别。在外面，例如在控制台.log输出中，它工作正常。

我在默认生成的AppComponent上尝试了一下：

import { Component } from '@angular/core';
const name = 'app';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: [`./${name}.component.css`]
})
export class AppComponent {
  title = 'app';
}

结果是一个很大的异常，您可以在其中看到角度尝试查找资源，例如：

src/./${name}.component.css .ts 不存在

有没有人暗示这里出了什么问题和/或我可以指出正确的方向吗？

更新：在angular社区的回应之后，这似乎更像是@angular/cli/webpack的问题。

Answer 1

这是因为Typescript编译器只将TS构建到JS中。而不是执行 TS。在编译代码时，编译器不知道任何运行时变量。

只能在将在运行时执行的代码部分中使用字符串内插。