The Nativescript mobile build can encounter issues if TypeScript file imports do not use correct paths

Whenever I attempt to construct or execute a mobile version of my Angular-built web application using Nativescript, I encounter numerous compiler errors like:

src/app/search/search.module.ts(5,29): error TS2307: Cannot find module 'app/common/pipes/pipes.module'.

This issue arises only when I import files using an absolute path. If, for instance, I use 

../../../common/pipes/pipes.module
instead of app/common/pipes/pipes.module, I do not face any errors.

Although the solution may seem simple, I am hesitant to make this change as using relative paths can complicate our work when restructuring or relocating components within our app.

Has anyone found a resolution to this problem? It only occurs when building the app with Nativescript CLI, not with Angular CLI.

angulartypescriptnativescriptangular2-nativescript

Answer №1

To make sure everything is working properly, you need to make adjustments to the paths configuration in your tsconfig.json file

   "paths": {
        "~/*": [
            "./src/*"
        ],
        "*": [
            "./node_modules/tns-core-modules/*",
            "./node_modules/*"
        ]
    }

After updating this configuration, you will be able to import files from the src folder using import ... from '~/app/...'

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

Issue with generic types being utilized as object identifiers

When using a variable as an object key with generics, I encountered an issue where TypeScript does not allow assigning values from one object to another. In this scenario, I have two objects declared with some shared keys and some unique keys. I also have ...

typescripttypescript-generics

When utilizing makeStyles in @mui, an error may occur stating that property '' does not exist on type 'string'

I am stuck with the code below: const useStyles = makeStyles(() => ({ dialog: { root: { position: 'absolute' }, backdrop: { position: 'absolute' }, paperScrollPaper: { overflow: 'visib ...

reactjstypescriptreact-hooksmaterial-ui

What is the best way to refresh my state after logging out while utilizing multiple reducers?

I'm in a bit of a pickle trying to reset my state with multiple reducers. I've come across various examples on how to reset the state of a Redux store. Here's one that caught my eye: const appReducer = combineReducers({ /* your app’s to ...

typescriptredux

Navigating to Angular components within a statically hosted S3 application

I am in the process of creating an application using Angular4 on the frontend. The main objective for deployment is to serve the frontend as static content from an AWS S3 bucket. Everything seems to be working smoothly except for one crucial issue. When u ...

angularamazon-s3

Upon updating AngularFire, an error is thrown stating: "FirebaseError: Expected type 'Ea', but instead received a custom Ta object."

I have recently upgraded to AngularFire 7.4.1 and Angular 14.2.4, along with RxFire 6.0.3. After updating Angular from version 12 to 15, I encountered the following error with AngularFire: ERROR FirebaseError: Expected type 'Ea', but it was: a c ...

angulartypescriptfirebasegoogle-cloud-firestoreangularfire

Encountering a module resolve error when a tsx file is added to the project item group

After setting up an asp.net core project with a react template and configuring Typescript, I created a simple file named Test.tsx with the following code: import React from 'react'; class Test extends React.Component { render() { r ...

typescriptasp.net-core-2.1react-tsx

Steps to invoke the Express JS code repository from a serverless repository

Within my current project, there exists various repositories housing Angular code, Express JS (node JS) code, and AWS serverless components. For a specific feature, I am tasked with transferring the 'userId' value from the Angular code to the ser ...

node.jsangularexpressserverlessaws-serverless

Utilizing lazy loading in Angular with 2 modules that require sharing the same service

Custom Module Integration: export class CustomModule { static forRoot(): ModuleWithProviders { return { ngModule: CustomModule, providers: [ MyService ] }; } } Dynamic Module #1: @NgModule({ imports: [ CommonM ...

angular

Exploring nested objects within an instance

I'm facing an issue with accessing a variable object within my main object. I am able to access 'start', 'end', and 'category' without any problem, but I am unsure how to access the variable Object in my Angular web app d ...

angulartypescriptangular-material

How to efficiently upload multiple files simultaneously in Angular 10 and .NET Core 5 by utilizing a JSON object

I have a JSON object structured like this: Class->Students this is a basic representation of my TypeScript class export class Classroom { Id:number; Name:string; Students:Student[]=[]; } export class Student { Name:string; Age:number; Sex:string; Imag ...

javascripttypescriptapiangular10

Using Angular to interpolate a string from a Kendo CellClickEvent in a separate component

Within my application, I am working with three main components: Component A: Connects component B and C Component B: Displays a grid of objects Component C: Shows detailed information when a row in the grid of component B is clicked +----------------- ...

angulartypescriptkendo-ui

What are the TypeScript type definitions for the "package.json" configuration file?

What is the most efficient method for typing the content of the "package.json" file in TypeScript? import { promises as fs } from 'fs'; export function loadManifest(): Promise<any> { const manifestPath = `${PROJECT_DIR}/package.json`; ...

typescriptnpmtypescript-typingspackage.jsontype-declaration

angular datatable pagination issue with mdb

I've been following a tutorial at this website: Unfortunately, I keep encountering an error whenever I attempt to use pagination. Cannot read property 'setMaxVisibleItemsNumberTo' of undefined This is how my HTML code looks: <table ...

angularangular-bootstrapbootstrap-material-design

Leveraging NestJs Libraries within Your Nx Monorepo Main Application

I am currently part of a collaborative Nx monorepo workspace. The setup of the workspace looks something like this: https://i.stack.imgur.com/zenPw.png Within the structure, the api functions as a NestJS application while the data-access-scripts-execute ...

javascriptreactjsangularmonoreponrwl-nx

How to access type properties in typescript without using the "this" keyword

Below is a snippet of code that I am working with: class Player implements OthelloPlayer { depth; constructor(depth: number) { this.depth = depth; } getMove(state: OthelloState) { return this.MinimaxDecision(stat ...

typescript

Casting types of objects in Angular2 using TypeScript

Trying to extract the model object from the JSON obtained through a http response call. The following JSON represents the body of the http response, { "dataType": "RWSupplier", "partyName": "Lifecare Pharmaceuticals", "partyShortName": null, "partySecon ...

jsontypescriptangular2-routing

Navigating JSON Objects in Ionic 2

Example of my JSON array structure [{ label: "Interests", datatype: "check", lookupname: "null", order: "05", options: [ 0:{id: "01", value: "Photography"} 1:{id: "0 ...

angularionic-frameworkionic2ionic3

Obtaining the value of a select option in Angular 2 from a button placed outside of a

Take a look at this snippet of code: (click)="deleteDescriptor(descriptor.DescriptorId, #fc+i) I am dynamically creating all of the selects. Therefore, my goal is to retrieve the value of the select when users click on the delete button located right next ...

angular

Angular 2 Validation Customizer

Recently, I created a web API function that takes a username input from a text field and checks if it is already taken. The server response returns Y if the username is available and N if it's not. For validating the username, I implemented a Validat ...

formsangularvalidationtypescript

Has the antd Form.create() method been substituted with something else?

I have been working on creating a login page in react using antd. I came across a tutorial that seems to be outdated as it is giving me an error. After researching on a forum, I found out that form.create() is no longer available, but I am unsure of how to ...

reactjstypescriptreact-reduxantd