"Error: Unfinished string literal encountered" occurring in a TypeScript app.component.ts file in NativeScript

I've been trying to learn NativeScript through a tutorial, but I keep encountering errors.

Here is an excerpt from 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  { }

In the TypeScript plugin of Atom, when I hover over the template:, it indicates that the type is (property) template: boolean, which seems strange. If I try to condense the HTML onto a single line, it recognizes it as a string type, suggesting that it may not support multiple lines for the template property.

As a beginner in NativeScript, I just want to move forward with the tutorial and fix any issues. I have carefully checked the code provided in the tutorial, but I can't spot the error. Below is the error message I encounter when attempting to run the application:

$ npm start

> <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="21404f46544d40530c505448424a525540535561100f110f11">[email protected]</a> prestart /Users/mb102/Angular-Projects/Demo
> npm run build


> <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e3828d84968f8291ce92968a80889097829197a3d2cdd3cdd3">[email protected]</a> 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! <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="33525d54465f52411e42465a5058404752414773021d031d03">[email protected]</a> build: `tsc -p src/`
npm ERR! Exit status 2
npm ERR! 
npm ERR! Failed at the <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="6908070e1c05081b44181c000a021a1d081b1d295847594759">[email protected]</a> 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! <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="13727d74667f72613e62667a7078606772616753223d233d23">[email protected]</a> prestart: `npm run build`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f6979891839a9784db87839f959d8582978482b6c7d8c6d8c6">[email protected]</a> 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
typescriptnativescript

Answer №1

Make sure to remember that in Typescript, multi-line strings are not allowed when assigning values to the template property. It's recommended to keep strings under 140 characters for better readability (consider using tools like tslint). If you prefer to include the template within the file, use backticks (`) instead of single quotes.

If you still choose to store the template in the code file, be sure to utilize the backtick symbol as a string delimiter.

Answer №2

Make sure to use the backticks ` instead of single or double quotes when defining your template string:

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Ways to access the new value of a cell in a Material UI Datagrid through the use of GridCellParams

When trying to access the newly modified value in a cell using the GridCellParams interface, I am faced with the issue that the 'value' property only provides me with the previous value of the cell. This asynchronous behavior is not ideal for my ...

reactjstypescriptmaterial-uifrontend

What is the method for displaying script commands within package.json files?

With a multitude of repositories, each one unique in its setup, I find myself constantly referencing the package.json file to double-check the scripts. "scripts": { "start": "npm run dev" "build:dev": "N ...

javascriptnode.jstypescriptnpm

There is no 'next' property available

export function handleFiles(){ let files = retrieveFiles(); files.next(); } export function* retrieveFiles(){ for(var i=0;i<10;i++){ yield i; } } while experimenting with generators in T ...

node.jstypescript

Using the className prop in React with TypeScript

How can the className prop be properly typed and utilized in a custom component? In the past, it was possible to do the following: class MyComponent extends React.Component<MyProps, {}> { ... } and then include the component using: <MyCompone ...

reactjstypescript

Utilizing Radio buttons to establish default values - a step-by-step guide

I am utilizing a Map to store the current state of my component. This component consists of three groups, each containing radio buttons. To initialize default values, I have created an array: const defaultOptions = [ { label: "Mark", value: & ...

javascriptreactjstypescript

Error encountered while building with Next.js using TypeScript: SyntaxError - Unexpected token 'export' in data export

For access to the code, click here => https://codesandbox.io/s/sweet-mcclintock-dhczx?file=/pages/index.js The initial issue arises when attempting to use @iconify-icons/cryptocurrency with next.js and typescript (specifically in typescript). SyntaxErr ...

javascripttypescriptbabeljsnext.js

Instead of returning an object, the underscore groupBy function now returns an array

Currently, I am attempting to utilize underscore to create an array of entities that are grouped by their respective locations. The current format of the array consists of pairs in this structure { location: Location, data: T}[]. However, I aim to rearran ...

javascriptangulartypescriptunderscore.js

An array that solely needs a single element to conform to a specific type

While I was pondering API design concepts, a thought crossed my mind. Is it feasible to define a type in this manner? type SpecialArray<Unique, Bland> = [...Bland[], Unique, ...Bland[]]; However, the error message "A rest element cannot follow anoth ...

typescript

How to detect changes in Angular 2 using a separate service

Within my AuthService, I store real-time user data and a method for logging in. When the 'Login' button is clicked, the AuthService is called to retrieve updated user data from the server and update the value of 'this.user'. As a resul ...

javascriptangulartypescriptrxjs

Using type as an argument in a hook in a similar fashion to how it is

My custom hook utilizes Zustand and is capable of storing various data types. However, I am looking to specify the type of data that will be stored similar to how it is done with the useState hook. import { Profile } from "@/types"; import { crea ...

reactjstypescriptnext.jszustand

Can one invoke ConfirmationService from a different Service?

How can I declare an application-wide PrimeNG dialog and display it by calling ConfirmationService.confirm() from another service? Below is the HTML code in app.component.html: <p-confirmDialog [key]="mainDialog" class="styleDialog" ...

angulartypescriptprimeng

Tips on adding an item to an array with React hooks and TypeScript

I'm a beginner with a simple question, so please bear with me. I'm trying to understand how to add an Object to the state array when a form is submitted. Thank you for your help! interface newList { name: string; } const ListAdder = () => { ...

reactjstypescriptreact-hooks

Is there a way to trigger a request to the backend when the user closes or refreshes the browser?

My Objective: I am working on a lobby feature that updates automatically when a player leaves. Using backend requests and sockets, the lobby is updated to display the current list of players after someone exits. The Challenge: I am faced with the issue ...

angulartypescriptweb-applicationsonbeforeunloadondestroy

What Type of state does Typescript expect in React?

Whenever I attempt to pass the state in my TypeScript-based React application using any to a function, I encounter a tslint error. no-any: The use of 'any' for type declaration compromises type safety. It is recommended to replace it with a mo ...

typescript

Finding the IP address of a server in Angular: A Comprehensive Guide

Is there a way to dynamically retrieve the server host IP address in an Angular application launched with ng serve --host 0.0.0.0? This IP address will be necessary for communication with the backend server. As each coworker has their own unique IP addres ...

node.jsangulartypescript

Implement Sorting Functionality in Angular Using FormArray

Hello, I am a beginner in Angular and need some help with implementing sorting functionality. I have an input class called Foo which contains a list of books with properties like Id, Title, and Description. These books are displayed in a table where users ...

angularangularjstypescriptsortingmaterial-ui

Error: It is not possible to assign a value to the Request property of the Object since it only has a getter method

Encountering issues while attempting to deploy my Typescript Next.js application on Vercel. The build process fails despite functioning correctly and building without errors locally. Uncertain about the root cause of the error or how to resolve it. The f ...

javascriptnode.jstypescriptnext.jsvercel

Employing Class Categories in Static Procedures

I am currently working on developing a foundational Model that will serve as the base for a specific model class, which will have an interface detailing its attributes. Within the base Model class, I am aiming to incorporate a static factory() function th ...

typescripttypescript-generics

Declare the push method within the Countly.q array in a TypeScript declaration file

Is there a way to declare Countly push add_event method in the following manner? Countly.q.push(['add_event',{ "key":"action_open_web", }]); I attempted to do this inside a declaration file (.d.ts) but it did not work. Here ...

javascriptreactjstypescriptdeclarationcountly-analytics

What could be causing the ERROR TypeError in an Angular form where "_co.service.formData" is undefined?

My attempt to create a form in Angular 7 has resulted in an error message: ERROR TypeError: "_co.service.formData is undefined" Here is the HTML code for the component: <form (sumbit)="signUp(form)" autocomplete="off" #form="ngForm"> <div clas ...

javascriptangulartypescriptangular7