コンポーネントデコレータの文字列補間に失敗しました

Question

最新のAngular 5バージョンにプロジェクトを更新していました。 私は現在のバージョン（@ angular/cli 1.5.0、@ angular/* 5.0.0）に基づいて新しく新しい角度のプロジェクトを作成し、問題を探し始めました。

デコレータで文字列補間を使用しても認識されません。外面、例： console.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存在しません

ここで何が間違っていたのか、正しい方向を指すことができますか？

更新： 角度コミュニティからresponseの後、それは@ angular/cli/webpackの問題のようです。

Answer 1

これは、TypescriptコンパイラがTSをJSにのみビルドしているためです。 TSを実行していません。 コードのコンパイル時に、コンパイラはランタイム変数を認識しません。

文字列補間は、実行時に実行されるコードの部分でのみ使用できます。