Nativescript-cli: App path alias in tsconfig relative to app/tns_modules

[NickIliev]

_From @JulienFr on May 25, 2017 11:36_

Hi,

I want all my paths to be relative to the app root folder.
So I added the regular "app/*" path alias to my tsconfig.json.
It compiles, executes and then throws with

Failed to find module "app/app.module" relative to: "app/tns_modules"

as below.

Main.ts

import {AppModule} from "app/app.module"; // if I set to "./app.module" it'll work fine... but I want that "app/*" path alias works across my application
import {platformNativeScriptDynamic} from "nativescript-angular";


platformNativeScriptDynamic().bootstrapModule(AppModule);

package.json

"nativescript": {
    "tns-android": {
      "version": "3.0.0"
    }
  },
  "dependencies": {
    "@angular/common": "4.0.0",
    "@angular/compiler": "4.0.0",
    "@angular/core": "4.0.0",
    "@angular/forms": "4.0.0",
    "@angular/http": "4.0.0",
    "@angular/platform-browser": "4.0.0",
    "@angular/platform-browser-dynamic": "4.0.0",
    "@angular/router": "4.0.0",
    "moment": "^2.18.1",
    "nativescript-angular": "^3.0.0",
    "nativescript-theme-core": "^1.0.4",
    "nativescript-unit-test-runner": "^0.3.4",
    "reflect-metadata": "^0.1.8",
    "rxjs": "^5.2.0",
    "tns-core-modules": "~3.0.1",
    "zone.js": "^0.8.5"
  },
  "devDependencies": {
    "@types/jasmine": "^2.5.47",
    "karma": "^1.7.0",
    "karma-jasmine": "^1.1.0",
    "karma-nativescript-launcher": "^0.4.0",
    "lazy": "1.0.11",
    "less": "^2.7.2",
    "nativescript-dev-android-snapshot": "^0.0.9",
    "nativescript-dev-typescript": "^0.4.5",
    "typescript": "~2.2.1"
  }

tsconfig.json at the root of the project along with the package.json

tsconfig.json

{
    "compilerOptions": {
        "module": "commonjs",
        "target": "es5",
        "declaration": false,
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "removeComments": true,
        "alwaysStrict": true,
        "suppressImplicitAnyIndexErrors": true,
        "noImplicitThis": true,
        "noEmitHelpers": true,
        "noEmitOnError": true,
        "baseUrl": ".",
        "paths": {
            "app/*": [
                "./app/*"
            ],
            "*": [
                "./node_modules/tns-core-modules/*",
                "./node_modules/*"
            ]
        },
        "lib": [
            "es6",
            "dom",
            "es2015.iterable"
        ]
    },
    "exclude": [
        "node_modules",
        "platforms",
        "**/*.aot.ts"
    ]
}

Let me know

_Copied from original issue: NativeScript/nativescript-angular#820_

[yadyn]

I've used the following successfully in my own project:

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

And then:
import { Routes } from "~/shared/routes";

I tried other things before this and they all failed to work. I think the ~ matters in this case.

[markentingh]

for some reason, I get the same error (Windows 10), and I found where the error is coming from.

within component-builder.js, line 33

var pathInsideTNSModules = file_system_1.path.join(file_system_1.knownFolders.currentApp().path, "tns_modules", namespace);

Shouldn't the path be in /node_modules? The path /app/tns_modules does not exist in my project. I am not using Angular, only Javascript.

[dtopuzov]

Hi @markentingh

node_modules is folder on you PC, tns_modules is folder on your emulator/device.

[chrillewoodz]

I tried

"~/*": [
  "./app/*"
],

But that still didn't work.

[SamVerschueren]

I stumble upon this issue as well. I'd like to have some kind of alias to all my shared stuff. Something like

"@shared/*": [
    "./app/shared/*"
]

This way I can just import {SharedModule} from '@shared/core'; or something. The thing is that the tsconfig.json is not copied over to the platforms directory. This way, it looks like it's not possible to define those path mappings when running the app as they aren't taken into account.

[darkyelox]

This is an annoying issue, I want to develop like in a fully TypeScript - Angular project but because of this large apps or, in my case, modular apps will be hard to maintain because of the many ../../../. ./ routes pain; the worst thing is that this issue can be resolved using webpack but this dont let you develop using live sync

[ethanzxlee]

any updates on this issue? thanks :)

[btaluy]

Would love to hear if there is an update for this, I'm having exact the same issue!

[RaphaelJenni]

+1

[matt-psaltis]

Just wanted to say, trying out the new NativeScript release with nativescript-dev-webpack and this all seems to be working correctly, I can add custom paths and these are all picked up and compiled in. Plus newest webpack module provides live sync so no going back to the dark ages.

[thomasmost]

gonna try updating my nativescript-dev-webpack but I'm running into problems with this as well, especially if I run tns build without the --bundle flag

[Fedelaus]

Is it known that tsconfig paths do not work within tns test?

The default ~/app appears to work as I can still utilize that import style, but adding the following entry doesn't work:

import { ItemsComponent } from '@item/items.component';

"@item/*": [
    "app/app/item/*"
]

The import is attempted to be found at app/tns_modules/, but an import using the tsconfig path ~/* are fine. How come this happens?

[gbrunow]

This works for me when running tns run ios --bundle or adding --bundle to my vscode launch settings like so:

{
    "name": "Launch on iOS",
    "type": "nativescript",
    "request": "launch",
    "platform": "ios",
    "appRoot": "${workspaceRoot}",
    "sourceMaps": true,
    "watch": true,
    "tnsArgs": [
        "--bundle"
    ]
}

I see the same errors others mentioned when not using --bundle.

[DimitarTachev]

Hi guys,

Sorry for the late response. I will try to explain this behavior in more details.

The tsconfig paths are designed to be used only with bundlers like Webpack - take a look at this issue for more details https://github.com/Microsoft/TypeScript/issues/10866. Here's the most important part of the conversation (the closing comment from a TypeScript team member).

... our position here along with the technical problems we want to solve are pretty explicit - path mapping reflects the behavior of an external resolution scheme (e.g. path mapping in AMD and System.js, aliases in Webpack and other bundlers). It doesn't imply we will change your paths.

In other words, you are not able to use these paths without passing the --bundle flag to the NativeScript CLI because the TypeScript compiler is leaving the custom paths in the generated JavaScript files and these paths cannot be resolved by the NativeScript runtimes as they are not valid file paths.

Regarding the tns test issue, we are releasing --bundle support for the unit tests in our 5.3.0 release, it's currently available as nativescript@rc. In other words, you need NativeScript CLI >= 5.3.0 and tns test <platform> --bundle.

If you are still not able to get this working using the --bundle flag, please open a new issue following the issue template.