Angular Protractor facing a complication during Typescript compilation

I have encountered an issue with a simple Typescript class:

export class Hello{
    myname: string = 'Scott';

    sayHello() {
        console.log(this.myname);
    }
}

In one of my Protractor Typescript files, I am trying to use it as follows:

import { Hello } from './hello';
const hello = new Hello();
hello.sayHello();

However, I am facing a Typescript compilation error:

[11:48:33] E/launcher - Error: TSError: ⨯ Unable to compile TypeScript: projects/cxone-component-showcase/e2e/src/hello.ts(3,14): error TS2339: Property 'myname' does not exist on type 'Hello'. projects/cxone-component-showcase/e2e/src/hello.ts(6,26): error TS2339: Property 'myname' does not exist on type 'Hello'.

The same exact Typescript class works fine in the actual Angular app. Do I need to make changes to the tsconfig file for the e2e tests? The current configuration for e2e is:

{
  "extends": "../../../tsconfig.json",
  "compilerOptions": {
    "outDir": "../../../out-tsc/e2e",
    "module": "commonjs",
    "target": "es5",
    "types": [
      "jasmine",
      "jasminewd2",
      "node"
    ]
  }
}

If you have any insights or ideas, please let me know as this situation is frustrating me. Thank you.

Answer №1

In my protractor configuration file, I initially included two lines to enable imports from the specified path attribute in the tsconfig file:

require('ts-node/register');
require('tsconfig-paths/register');

However, I discovered that only require('tsconfig-paths/register'); was necessary for the paths to function correctly. Once I removed require('ts-node/register');, the issue resolved itself.

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

"Encountered an error message: Unable to retrieve property 'getCapabilities' due to a TypeError

Everything was going smoothly with my tests until I encountered an issue when the browser.getCapabilities(); method was called in the OnComplete function, resulting in an error. //The HTMLReport is triggered once all tests are completed onComplete: f ...

Utilize React Hook Form to easily reset the value of an MUI Select component

I created a dropdown menu where users can select from "Item 1", "Item 2", and "Item 3". Additionally, there is a "Reset" button that allows users to clear their selection and make a new one. Below is the code I used: import React from ...

What is the recommended data type to assign to the `CardElement` when using the `@stripe/react-stripe-js` package in TypeScript?

I'm struggling to determine the correct type to use for this import: import { CardElement } from '@stripe/react-stripe-js'; I have successfully used the types Stripe, StripeElements, and CreateTokenCardData for the stripe and elements props ...

Having trouble launching React application on local machine due to missing node modules

I am completely new to React. I recently forked a project on Github and am attempting to run it on my own machine. However, I've noticed that the folder structure is missing the node modules. Does this mean I need to install create-react-app globally ...

Error occurring while attempting an Angular 2 GET request, even after receiving a successful status code of

When making a call to my GET rest service, I use the following code: makeGetCall(url: string): Observable<any> { const headers = new Headers({'auth-code': 'auth-code', 'from':&apo ...

Using Angular Ngrx to Retrieve and Showcase a Selection of Choices from a Java API

When accessing the Java API at localhost://company/products/123/fetchOptions, you can expect a response similar to the following: { "Increase": true, "Decrease" : true, "Like" : true, "Dislike" : true, "Old" : false, "Others" : true } Using Angula ...

Tips for sending a function as a value within React Context while employing Typescript

I've been working on incorporating createContext into my TypeScript application, but I'm having trouble setting up all the values I want to pass to my provider: My goal is to pass a set of values through my context: Initially, I've defined ...

Error in Angular: Running the Angular CLI outside a workspace prohibits the use of this command

I recently started learning Angular and am having trouble generating new components. When I opened the Integrated Terminal in the folder where I want to create it ng generate component modulo an error message popped up: Error: This command is not availabl ...

Issue with Angular 8 Material: mat-option remains unselected after update

When using Angular 8, I encountered an issue where the mat-option was not selecting a specific option. It worked fine when I used static options, but failed on dynamic mat-options. <mat-label>Item Category {{item.category_id}}</mat-label> & ...

I am experiencing issues with Angular routing as it keeps redirecting me back to the main base url

Currently, I am attempting to utilize the angular router in order to navigate from one page to another. Within my page, there is a button that, upon clicking, should direct me to a different page. At this moment, my URL reads as: http://localhost:4200/us ...

Error: Attempted to call the 'post' method on an undefined object, resulting in an Uncaught TypeError. This occurred within the Ionic 2 framework while executing the Javascript code located

While I attempt to convey my message in English, unfortunately, it is not a language I am fluent in. Currently, I am working on an Ionic 2 project. In this particular scenario, I am trying to make an HTTP request using the POST method while emulating it o ...

Issue with Keydown Event functionality on Android devices

I recently encountered an issue while creating a function to restrict input to numbers, '-', and BackSpace key using the keydown event. Surprisingly, the function worked flawlessly when tested on Ionic serve and iOS, but failed on an Android devi ...

Issue with ngx-translate in Angular 8 production mode

Currently, I have integrated ngx-translate into my Angular project for localization purposes. Unfortunately, I am encountering a problem specifically when deploying in production mode. The issue at hand is that only the key is being displayed instead of ...

Attempting to retrieve data either by code or with a WHERE condition proves unsuccessful as the data retrieval process yields no results

Seeking assistance with my Angular project that is utilizing a Node.js server and MSSQL express. I am having trouble retrieving data using a WHERE condition in my code. Any help in identifying the missing piece or error would be appreciated. Thank you. // ...

Combine variables within an attribute of an Angular component

I have searched high and low for a solution, but my dilemma persists. Here is my issue: Within my HTML template in Angular, I am trying to pass a series of data to the metadata property of a button. However, I am struggling to concatenate the variable con ...

Is there a way to modify my port to 4900 using npm?

Is there a way to change my port to 4900 using npm, since the command ng s --port 4900 is not working for me? Here is the error message I receive: PS G:\PROJECTS\PetroHSE> ng s --port 4900 ng : The term 'ng' is not recognized as ...

Dropdown with no selected option

Having some trouble with the p-dropdown element in Angular5 and primeng library. Specifically, when dealing with a large entity called Consignment that has multiple fields, I notice that the selected values on several p-dropdown elements (in this case, the ...

Troubleshooting conflicting dependencies in Angular 17

After setting up a new project with Angular 17, I encountered an error: npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to resolve dependency tree npm ERR! npm ERR! While resolving: <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail ...

Angular2+ Function to Close Two Modals

One of my challenges involves a side modal that triggers a confirm modal with two simple options: yes and no. Currently, I face the issue where only one modal can be closed at a time when the user clicks the "yes" button. This closes the closest modal to ...

When upgrading from ng15 to ng16, beware of the error message stating that the type '(event: RouterEvent) => void' cannot be assigned to type '(value: Event_2) => void.'

section, I encountered issues with my Angular project after upgrading from ng15 to ng16. Specifically, errors are arising when trying to implement the code snippet below. Can anyone provide insights on what may be causing problems with the event argument ...