The command "ng test" threw an error due to an unexpected token 'const' being encountered

Any assistance with this matter would be greatly appreciated.

I am in the process of constructing an Angular 5 project using angular/cli. The majority of the project has been built without any issues regarding the build or serve commands.

However, when attempting to run my test suite, I encountered the following error:

27 02 2018 14:22:58.588:WARN [karma]: No captured browser, open http://localhost:9876/
27 02 2018 14:22:58.601:INFO [karma]: Karma v1.7.1 server started at http://0.0.0.0:9876/
27 02 2018 14:22:58.601:INFO [launcher]: Launching browser PhantomJS with unlimited concurrency
27 02 2018 14:22:58.608:INFO [launcher]: Starting browser PhantomJS
10% building modules 3/3 modules 0 active(node:82890) DeprecationWarning: loaderUtils.parseQuery() received a non-string value which can be problematic, see https://github.com/webpack/loader-utils/issues/56
parseQuery() will be replaced with getOptions() in the next major version of loader-utils.
27 02 2018 14:23:06.801:WARN [karma]: No captured browser, open http://localhost:9876/  
27 02 2018 14:23:06.988:INFO [PhantomJS 2.1.1 (Mac OS X 0.0.0)]: Connected on socket BcW5WVSiPfS1DRQdAAAA with id 61500965
PhantomJS 2.1.1 (Mac OS X 0.0.0) ERROR
SyntaxError: Unexpected token 'const'
at http://localhost:9876/_karma_webpack_/vendor.bundle.js:28
...

I have verified that both my tsconfig files have the targets set to "es5".

For the browser tests, I am utilizing PhantomJS and striving to gather coverage reports with cobertura format.

Refer to the provided files for information about my setup.

Thank you in advance.

tsconfig.json:

{
"compileOnSave": false,
"compilerOptions": {
"outDir": "./dist/out-tsc",
"sourceMap": true,
"declaration": false,
"moduleResolution": "node",
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"noEmitHelpers": true,
"target": "es5",
"typeRoots": [
"node_modules/@types"
],
"lib": [
"es2017",
"dom"
]
}
}

src/tsconfig.spec.json:

{
"extends": "../tsconfig.json",
"compilerOptions": {
"outDir": "../out-tsc/spec",
"baseUrl": "./",
"module": "commonjs",
"target": "es5",
"types": [
"jasmine",
"node"
]
},
"files": [
"test.ts"
],
"include": [
"**/*.spec.ts",
"**/*.d.ts"
]
}

Answer №1

Following a suggestion from axl-code in the comments, I decided to switch to using a headless chrome browser which resolved the problems I was facing. Thank you for the tip and hopefully this information can benefit others!

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

How can I ensure that TypeScript recognizes when I add a missing property back to an object in this scenario?

I recently came across an issue while using Typescript: Omit nested property and ended up encountering more complex errors. So my question remains - how can I replace multiple nested props on a TypeScript input in the convert function? P.S. On a side not ...

Obtain the specific generic type that is employed to broaden the scope of a

I am working on a class that involves generics: abstract class Base<P extends SomeType = SomeType> { // ... } In addition, there is a subclass that inherits from it: class A extends Base<SomeTypeA> { // ... } I'm trying to figure out ...

Attempting to deploy an Angular 9 web project within Visual Studio

Starting my first Angular project has been a smooth process so far. After successfully running "npm start" without any errors, I encountered some issues when launching the application from Visual Studio. Despite sending the same commands, I consistently ...

Issue encountered with UglifyJs - Unexpected token: title (Subject)

My attempt to deploy my initial Angular application is not going smoothly. The build process fails and the error message I'm encountering states: ERROR in vendor.809dd4effe018f6b3d20.bundle.js from UglifyJs Unexpected token: name (Subject) [vendo ...

Dynamically load components within a modal window

I am looking for a way to dynamically load a custom component inside a modal while keeping it as flexible as possible. Here is an example : -HTML CODE- <button id="floating_button" class="floating_button animation_floating_in" (click)="loadCustomComp ...

Typescript's interface for key-value pairing with generic types

Consider the example Object below: let obj1: Obj = { 'key1': { default: 'hello', fn: (val:string) => val }, 'key2': { default: 123, fn: (val:number) => val }, // this should throw an error, because the types of d ...

The term 'Component' is not a valid JSX component that can be used

'Component' is causing issues as a JSX component The error appears to be within the _app.tsx file of my Next.js project. I've been struggling with this problem since yesterday, encountered it during deployment on Vercel for my Next.js TypeS ...

Utilizing PrimeNG dropdowns within various p-tree nodes: Distinguishing between selected choices

I am working with a PrimeNg p-tree component <p-tree [value]="treeNodes" selectionMode="single" [(selection)]="selectedNode"></p-tree> The treeNodes are defined using ng-templates, with one template looking li ...

Execute different commands based on operating system using NPM conditional script for Windows and Mac

Scenario: I am currently configuring a prepublishOnly hook in NPM. This hook is designed to remove the "lib" folder, transpile the typescript source files into a new lib folder, and then execute the tests. The issue at hand: There are two individuals re ...

Mastering the Conversion from NGRX Effect to NGRX Effect v15

I am currently working on converting the code snippet to NGRX 15. As a newcomer to Angular, I could use some guidance. "@ngrx/effects": "^15.4.0" @Injectable() export class SnackbarEffects { @Effect({ dispatch: false }) cl ...

The issue of TypeScript failing to return HTML Template Element from Constructor typing is causing complications

There is a restriction on using new to create an instance of Template, which extends an HTMLTemplateElement. To work around this limitation, I fetch and return an HTMLTemplateElement by using document.getElementById(id) within the constructor of the Templ ...

I am working on a project where I have a parent component that contains a textarea element. My goal is to dynamically adjust the height of this textarea

Is there a way to adjust the size of a textarea component in a child component? textarea.html <textarea style = "height"=150px></textarea> // The height is defined globally here xyz.html <app-textarea></app-textarea> // Looking ...

Error encountered during Angular ahead-of-time (AOT) compilation: Internal state issue - Summaries cannot contain members in StaticSymbols

Our team is currently working on implementing ahead of time (AOT) compilation for our Angular 2 project, but we have encountered an error: Error: Internal state: StaticSymbols in summaries can't have members! {"filePath":"C:/Users/bhavy/Documents/p ...

Experience the power of combining React with typescript, webpack, and ui-router-react for

After carefully studying the ui-router-react documentation (), I am encountering several challenges with webpack compilation when importing import {UIRouter, UIView, UISref, UISrefActive, pushStateLocationPlugin} from 'ui-router-react'; This is ...

How can I retrieve the selected value from an Angular 2 dropdown menu when it changes, in order to utilize it within a function?

I am currently working on creating a dropdown menu with multiple options. When a user selects an option, I need to make an API call that requires an ID parameter. Inside my component.ts file, I have defined an array containing the values like this: valu ...

Steps to simulate an injected service within a function using Injector

There is an implementation in Angular 7.x where a global error handling injects its services using the Injector. Each function has a reference with the injector, as shown below: import { ErrorHandler, Injectable, Injector, NgZone } from '@angular/co ...

The issue of Angular 15 Childcomponent failing to refresh the user interface despite input modifications

Within this component, I have two child components: <span>Timings:</span> <sir-project-fasetiming [faseTiming]="projectTiming.timingInitiatie" (faseTimingChanged)="faseTimingChanged($event, 'timingInitiatie')"&g ...

The element is implicitly assigned an 'any' type due to the fact that an expression of type 'any' cannot be used to index types in nodejs and solidity

I am in need of setting networks in my contract using NodeJS and TypeScript. Below is the code I have written: let networkId: any = await global.web3.eth.net.getId(); let tetherData = await Tether.networks[networkId]; Unfortunately, I encountered ...

Difference between Angular2 import syntax: "use 'import * as <foo>'" or "use 'import {<foo>}'"

There are two different ways to import modules that I have noticed. Most imports seem to follow this syntax: 'import {<something>} (for example, import { Component } from '@angular/core';) The other way of importing looks like this: ...

Tips for setting unique base_url for separate environment instances in angular2

My index.html file in Angular2 has the following content: When I build it in default mode (development mode) using npm run build, I want it to have: <base href="/"> However, when I build it in production mode (npm run build --target=production), I ...