angular 2 and template: Unterminated string literal.at line 6 col 24

Question

In the code below, for some reason when I enter a new line after template it gives me an error. All my tags must be in one line '<h1>...<h2> etc.' - The minute I hit enter after the template: 'enter it gives me an error.

Unterminated string literal.at line 6 col 24 TS Error Property assignment expected.at line 7 col 10 TS Error ',' expected.at line 7 col 25 TS Error Type expected.at line 7 col 27 TS Error Unterminated regular expression literal.at line 7 col 28 TS Error ',' expected.at line 8 col 1

import {Component} from 'angular2/core';

@Component({
    selector: 'ponyracer-app',
    template:
    '<h1>PonyRacer</h1>
     <h2>{{numberOfUsers}}</h2>'
})
export class PonyRacerApp {

    numberOfUsers: number = 146;
}

Answer 1

Use ` (backticks) and not ' (single - or double - quotes) to declare your template string:

import {Component} from 'angular2/core';

@Component({
    selector: 'ponyracer-app',
    template:
    `<h1>PonyRacer</h1>
     <h2>{{numberOfUsers}}</h2>`
})
export class PonyRacerApp {

    numberOfUsers: number = 146;
}

When you use those, you declare template strings and not regular strings. They are a part of ES6 (aka ECMAScript 2015):

Template literals are string literals allowing embedded expressions. You can use multi-line strings and string interpolation features with them. They were called "template strings" in prior editions of the ES2015 / ES6 specification.

More about it on MDN or TypeScript Deep Dive.