"Unterminated string literal error" in NativeScript TypeScript app.component.ts

Question

I've been following along this tutorial for NativeScript, but it's giving me some errors.

Here is my app.component.ts file:

import { Component } from '@angular/core';

@Component ({
   selector: 'my-app',
   template: '
   <ul>
      <li><a [routerLink] = "['/Product']">Product</a></li>
      <li><a [routerLink] = "['/Inventory']">Inventory</a></li>
   </ul>
   <router-outlet></router-outlet>'
})
export class AppComponent  { }

I'm using Atom with TypeScript plugin, and when I hover over the template: it tells me that it's of type (property) template: boolean which seems odd. If I try putting the HTML onto a single line it tells me it's type string, almost like it doesn't like the fact that template is on multiple lines.

Anyway I'm quite new to NS, I just wanna progress through this tutorial so it may be something obvious. I've checked the code it tells me to copy closely but can't see what's wrong. Below is the error I'm seeing when I try to run the app:

$ npm start

> angular-quickstart@1.0.0 prestart /Users/mb102/Angular-Projects/Demo
> npm run build


> angular-quickstart@1.0.0 build /Users/mb102/Angular-Projects/Demo
> tsc -p src/

src/app/app.component.ts(5,15): error TS1002: Unterminated string literal.
src/app/app.component.ts(7,27): error TS1005: '>' expected.
src/app/app.component.ts(7,43): error TS1005: ':' expected.
src/app/app.component.ts(8,27): error TS1005: '>' expected.
src/app/app.component.ts(8,45): error TS1005: ':' expected.
src/app/app.component.ts(9,5): error TS1110: Type expected.
src/app/app.component.ts(9,6): error TS1161: Unterminated regular expression literal.
src/app/app.component.ts(10,20): error TS1110: Type expected.
src/app/app.component.ts(10,21): error TS1161: Unterminated regular expression literal.

npm ERR! Darwin 16.7.0
npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "run" "build"
npm ERR! node v6.11.0
npm ERR! npm  v3.10.10
npm ERR! code ELIFECYCLE
npm ERR! angular-quickstart@1.0.0 build: `tsc -p src/`
npm ERR! Exit status 2
npm ERR! 
npm ERR! Failed at the angular-quickstart@1.0.0 build script 'tsc -p src/'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the angular-quickstart package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     tsc -p src/
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs angular-quickstart
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!     npm owner ls angular-quickstart
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!     /Users/mb102/Angular-Projects/Demo/npm-debug.log

npm ERR! Darwin 16.7.0
npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "start"
npm ERR! node v6.11.0
npm ERR! npm  v3.10.10
npm ERR! code ELIFECYCLE
npm ERR! angular-quickstart@1.0.0 prestart: `npm run build`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the angular-quickstart@1.0.0 prestart script 'npm run build'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the angular-quickstart package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     npm run build
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs angular-quickstart
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!     npm owner ls angular-quickstart
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!     /Users/mb102/Angular-Projects/Demo/npm-debug.log

it looks like you are using ' instead of ` for the template property. — toskv, Aug 23 '17 at 14:38
Strings in TypeScript/JavaScript aren't multi-line. If you open the quote, you must close it on the same line. To spread the string over multiple lines you need to concatenate a set of strings together. Or you can use Template Literals. https://stackoverflow.com/questions/805107/creating-multiline-strings-in-javascript — , Aug 23 '17 at 14:38

score 0 · Answer 1 · answered Aug 24 '17 at 09:56

The value you are assigning to the template property is a multi line string. Those are not permitted in Typescript. It's usually not a good idea to have strings longer than 140 characters (you can use the wonderful tslint to help you with this), so it's better to put the template in the html file.

If however you still want to keep it in the file you have to use the ` (backtick - alt+0096 on windows) character to delimit the string instead of the ' (single quote).

score 0 · Answer 2 · edited Mar 28 '20 at 10:29

0

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

template: `
   <ul>
      <li><a [routerLink] = "['/Product']">Product</a></li>
      <li><a [routerLink] = "['/Inventory']">Inventory</a></li>
   </ul>
   <router-outlet></router-outlet>`

edited Mar 28 '20 at 10:29

David Buck

3,752
35
31
35

answered Mar 28 '20 at 09:24

Kamal

1
1

"Unterminated string literal error" in NativeScript TypeScript app.component.ts

2 Answers2