Nativescript: TypeScript BaseUrl support

[TeddyBo]

Is it possible to support TypeScript baseUrl to avoid relative path in imports?
When I define baseUrl in tsconfig.json:
{ "compilerOptions": { ... "baseUrl": "./app", ... } }

vscode correctly resolves dependencies, for example:
import { TaskService } from "shared/task/task.service"

But when I try to launch an application on android I get the error:
"Failed to find module: shared/task/task.service, relative to /app/tns_modules"

[tsonevn]

Hi @TeddyBo,
Thank you for interest in NativeScript.
Setting up "baseUrl" in "compilerOptions" to prevent from using relatives path will work on Typescript compilation, However the above-given error has been triggered, when the app has been started and the device try to find the file in tns_modules folder. The compiler will search for task.service.ts file in node_modules or tns_modules folders, when you use non relative path in the import, which is expected. Regarding to that it will help if you could give more info, about the need of such a support. As a solution you could create your own npm package or plugin with the needed service, which will be install in node_modules folder.

I hope this helps

[TeddyBo]

Hi @tsonevn,
Thanks for your reply.
My problem is that I want to rid off relative paths in imports because in the case when a file with such imports is moved to another folder all these paths have to be edited.
Is it possible to make the compiler to check files in "baseUrl" if it is defined and then in "tns_modules"?

[tsonevn]

Hi @TeddyBo,
We will log this as a feature request and will investigate, how this functionality could be implemented in NativeScript. You could keep tracking this issue for further info.
Regards,
@tsonevm

[manojdcoder]

Please allow import with node_modules & custom modules / make import to accept require syntax (~ - to load files from app bundle),

for instance with lodash, below one doesn't work at all,

import * as _ from 'lodash';

only direct require statement solved the issue for now

const _ = require('lodash');

[manojdcoder]

Restarting VS-Code fixed the issues with node_modules, but still importing anything from app bundle fails.

example

import * as uihelper from '~/utils/uihelper'

where uihelper is a ts file inside app/utils directory.

[manojdcoder]

@TeddyBo @tsonevn After going through tsconfig.json guidelines I found a working solution,

When I have to import anything from app bundle (non-relative paths), NS require system allows me to do that with ~ (tidal) symbol. I used path mappings to make TS understand the same logic.

For example I have uihelper.ts inside app/utils directory, using the statement below

import * as uihelper from '~/utils/uihelper

works fine when I define paths in my tsconfig.json like below

{
    "compilerOptions": {
        "baseUrl": "./app",
        "paths": {
            "~/*": ["./"]
        },
        "module": "commonjs",
        "target": "es5",
        "sourceMap": true,
        "experimentalDecorators": true,
        "emitDecoratorMetadata": true,
        "noEmitHelpers": true,
        "noEmitOnError": true
    },
    "exclude": [
        "node_modules",
        "platforms"
    ]
}

Will be great if have this configuration added by default to the NS Typescript Template.

[imiric]

@manojdcoder Small correction:

diff --git a/tsconfig.json b/tsconfig.json
index 41e26a0..8aed240 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -2,7 +2,7 @@
     "compilerOptions": {
         "baseUrl": "./app",
         "paths": {
-            "~/*": ["./"]
+            "~/*": ["./*"]
         },
         "module": "commonjs",
         "target": "es5",

I like this approach since it makes it visually clear that the import is an app-local module.

I agree that a similar solution should be made default, or at the very least mentioned in the {N} tutorials and documentation.

[rbasniak]

@imiric I tried this approach, but then I loose all the intelisense on my module imports on VS Code. Does this happen with you too?

VS Code does not recognize this, but the application works even with VS Code telling that this is an error.

[NickIliev]

Closing as baseUrl support (for tsconfig.json0 is added to NativeScript 3.x.x and all the default templates are using it by design.

e.g. the default baseUrl in TypeScript template

{
    "compilerOptions": {
        "module": "commonjs",
        "target": "es5",
        "experimentalDecorators": true,
        "emitDecoratorMetadata": true,
        "noEmitHelpers": true,
        "noEmitOnError": true,
        "lib": [
            "es6",
            "dom"
        ],
        "baseUrl": ".",
        "paths": {
            "*": [
                "./node_modules/tns-core-modules/*",
                "./node_modules/*"
            ]
        }
    },
    "exclude": [
        "node_modules",
        "platforms",
        "**/*.aot.ts"
    ]
}

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.