TypeScriptがdivを見つけることができません

Question

角のデモを試していて、[ts]についてこのエラーがあります.divが見つかりません。 Core2.0と新しい角度のダウンロードを使用して

import { Component } from "@angular/core"; 
import { FormControl } from "@angular/forms"; 

@Component({ 
selector: "main", 
template: ' 
    <div> 
     <label for="first-name-input">First Name:</label> 
     <input type="text" [formControl]="firstNameInput" 
    </div>', 
}) 
export class AppComponent { 

public firstNameInput: FormControl = new FormControl(""); 
public lastNameInput: FormControl = new FormControl(""); 

public message: string = "Hello World!"; 

}

。上記の意味は何ですか？

これはtypescriptですと角度とtslint.json

{ 
"extends": "tslint:latest", 
"rules": { 
    "arrow-parens": true, 
    "interface-name": [ true, "never-prefix" ], 
    "curly": true, 
    "no-var-requires": false, 
    "no-string-literal": false, 
    "no-console": [ false ], 
    "object-literal-sort-keys": false, 
    "ordered-imports": [ false ] 
}, 
"jsRules": { 
    "curly": true 
}, 
"rulesDirectory": [] 

}

初めての経験です。

Answer 1

これは、複数行のテンプレート文字列を一重引用符で囲んでいるためです。一重引用符では、複数の行にまたがることはできません。それは行を見て、divという名前の変数を参照していると思っています。

単一引用符ではなく、複数の行にまたがるテンプレート文字列を定義する `文字（グレーブまたはバックティック）を使用できます。 $ {...}のように囲まれた式も評価されるので、テキストがスコープ内の変数である場合は$ {text}、さらに$ {text.toUpperCase（）+他のテキスト}。

Answer 2

これは単純な構文エラーです。テンプレートは、単一引用符の代わりにバッククォート（ `）で囲まれた複数行の文字列リテラルでなければなりません。