Nativescript-cli: Failed to find module when using custom paths

[NickIliev]

_From @public-virtualys on September 28, 2017 8:24_

Which platform(s) does your issue occur on?

Both

Please provide the following version numbers that your issue occurs with:

• CLI: 3.2.1
• Cross-platform modules: 3.1.1
• Runtime(s): tns-android: 3.2.0
• Plugin(s):

    "@angular/animations": "~4.2.0",
    "@angular/common": "~4.2.0",
    "@angular/compiler": "~4.2.0",
    "@angular/core": "~4.2.0",
    "@angular/forms": "~4.2.0",
    "@angular/http": "~4.2.0",
    "@angular/platform-browser": "~4.2.0",
    "@angular/router": "~4.2.0",
    "email-validator": "^1.1.1",
    "moment": "^2.18.1",
    "nativescript-angular": "~4.2.0",
    "nativescript-cardview": "^2.0.2",
    "nativescript-facebook-login": "^1.0.1",
    "nativescript-fresco": "^3.0.5",
    "nativescript-ngx-fonticon": "^2.2.3",
    "nativescript-orientation": "^1.6.1",
    "nativescript-push-notifications": "^0.1.4",
    "nativescript-snackbar": "^1.3.0",
    "nativescript-sqlite": "^1.1.9",
    "nativescript-telerik-ui": "^3.1.3",
    "nativescript-textinputlayout": "^2.0.0",
    "nativescript-theme-core": "~1.0.2",
    "reflect-metadata": "~0.1.8",
    "rxjs": "~5.4.2",
    "tns-core-modules": "~3.1.0",
    "ts-md5": "^1.2.2",
    "zone.js": "~0.8.2"

Please tell us how to recreate the issue in as much detail as possible.

Edit tsconfig.json of an nativescript + angular project. Add a new entry to the "paths" property with an alias, for instance :

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

Make an import based on this alias in any typescript project file, for instance :
import { SharedModule } from "@app/shared/shared.module";
Compilation works well, but at runtime, an error is thrown :

System.err: java.lang.RuntimeException: Unable to create application com.tns.NativeScriptApplication: com.tns.NativeScriptException:
System.err: Error calling module function
System.err: Error calling module function
System.err: Error calling module function
System.err: Error: com.tns.NativeScriptException: Failed to find module: "@app/shared/shared.module", relative to: app/tns_modules/
System.err:     com.tns.Module.resolvePathHelper(Module.java:146)
System.err:     com.tns.Module.resolvePath(Module.java:55)
System.err:     com.tns.Runtime.runModule(Native Method)
System.err:     com.tns.Runtime.runModule(Runtime.java:530)
System.err:     com.tns.Runtime.run(Runtime.java:522)
System.err:     com.tns.NativeScriptApplication.onCreate(NativeScriptApplication.java:19)
System.err:     android.app.Instrumentation.callApplicationOnCreate(Instrumentation.java:1011)
System.err:     android.app.ActivityThread.handleBindApplication(ActivityThread.java:4518)
System.err:     android.app.ActivityThread.access$1500(ActivityThread.java:144)
System.err:     android.app.ActivityThread$H.handleMessage(ActivityThread.java:1339)
System.err:     android.os.Handler.dispatchMessage(Handler.java:102)
System.err:     android.os.Looper.loop(Looper.java:135)
System.err:     android.app.ActivityThread.main(ActivityThread.java:5221)
System.err:     java.lang.reflect.Method.invoke(Native Method)
System.err:     java.lang.reflect.Method.invoke(Method.java:372)
System.err:     com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:899)
System.err:     com.android.internal.os.ZygoteInit.main(ZygoteInit.java:694)
System.err: File: "<unknown>, line: 1, column: 265

### Is there code involved? If so, please share the minimal amount of code needed to recreate the problem.
-

_Copied from original issue: NativeScript/NativeScript#4899_

[NickIliev]

@public-virtualys
Let me start by saying that custom paths are not officially supported.

Before posting a possible solution to this problem I want to point out one very strong point against using the approach - changing the default app path may later cause the application not to build with WebPack. As all Angular applications are showing great improvement when bundled with Webpack I would recommend to avoid using custom path and continue using the default CLI structure.

All that said, If you still want to experiment with custom paths you can apply the following solution:

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

and then refer the paths with ~ as follows:

import { AppComponent } from "~/app.component";

Once again this would break bundling with WebPack so it is not recommended approach.

[darkyelox]

@NickIliev i dont get it why you said that will break bundling with webpack, i have a project and use some custom path like @myproject/* and everything compiles and when using tns run android it crash as spected but using * nativescript-dev-webpack * and running the app using tns run android --bundle the app runs great (sadly the livesync does not work); i want to know why using ~ / * it works using the normal run command but using anything else doesn't

[DanLatimer]

@NickIliev why does your suggestion work?

My use case is I have 4 angular projects that have multiple shared folders that are symlinked in. Having the ability to define custom "webpack resolve aliases" / "typescript paths" would be a huge relief for me as I could use aliases in the library folders so they can access each other with something other than relative paths (which assumes they are all symlinked into the same folder structure)

[Lightk3ira]

@NickIliev

Hello Nick, you stated back in September last year:

Let me start by saying that custom paths are not officially supported.

Is there any progress on this or a possible solution I can implement?

For Example in my app.module.ts I use custom @component

import { HeaderComponent } from '@components/header/header.component';
import { FooterComponent } from '@components/footer/footer.component';

In app.module.tns.ts this does not work for some reason. It will just go red saying it cannot find it.

The paths only work if they use the default:

import { HeaderComponent } from './components/header/header.component';
import { FooterComponent } from './components/footer/footer.component';

tsconfig.json:

"baseUrl": "./src",
    "paths": {
      "@components/*": ["app/components/*"],
      "@environments/*": ["environments/*"],
      "@node_modules/*": ["../node_modules/*"],
      "@pipes/*": ["app/pipes/*"],
      "@services/*": ["app/services/*"],
    }

tsconfig.tns.json:

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "module": "es2015",
    "moduleResolution": "node",
    "baseUrl": "./",
    "paths": {
      "~/*": [
          "src/*"
      ],
      "test": [
          "./node_modules/tns-core-modules/*",
          "./node_modules/*"
      ]
    }
  }
}

This is a small example for the purpose of explanation. I tried a few different approaches but am unable to get these to work in app.module.tns.ts

[funder7]

Hi, it's your project configured with code sharing?
I've solved the issue about custom paths by defining them in each tsconfig file.
It was working normally in a previous project, with no code sharing, this makes me think that the configuration needs to be done properly, in order to import the right files, depending on which version you're building (web or tns).