get error : [Failed to find module: "./tabs/ tabs.module", relative to: app//] on device only

[nkemerchou]

Environment
Provide version numbers for the following components (information can be retrieved by running tns info in your project folder or by inspecting the package.json of the project):

• CLI: 5.4.2
• Cross-platform modules:
• Android Runtime:
• iOS Runtime:
• Plugin(s):
• NativeScript-Angular: yes
• Angular:

Describe the bug
I have the issue using the project (login-tab-navigation-ng-master from github ) which works fine in android emulator, but when i use tns preview to check the app in my android phone i get the error : [Failed to find module: "./tabs/ tabs.module , relative to: app//], can some one help on this ?

To Reproduce

• Pull the project from GitHub : https://github.com/artu-ole/login-tabs-ng-shared
• tns preview on Android phone (mine is Samsung S6)
• click on "go to tabs page"
• error get raised

Expected behavior
the tab page should open
Sample project
https://github.com/artu-ole/login-tabs-ng-shared

[tsonevn]

Hi @nkemerchou,
Try to start the preview command with bundle flag and check if you will have an issue. For example:
tns preview --bundle

[nkemerchou]

tns preview --bundle did not help, still see the error :

LOG from device Galaxy S6: ### ErrorHandler Stack: Error: Uncaught (in promise): Error: com.tns.NativeScriptException: Failed to find module: "~/app/t
abs/tabs.module", relative to: /app/
LOG from device Galaxy S6: android.os.Handler.handleCallback(Handler.java:751)
LOG from device Galaxy S6: android.os.Handler.dispatchMessage(Handler.java:95)
LOG from device Galaxy S6: com.tns.Module.resolvePathHelper(Module.java:146)
LOG from device Galaxy S6: com.tns.Module.resolvePath(Module.java:55)
LOG from device Galaxy S6: com.tns.Runtime.callJSMethodNative(Native Method)
LOG from device Galaxy S6: com.tns.Runtime.callJSMethodImpl(Runtime.java:1083)
LOG from device Galaxy S6: com.tns.Runtime.dispatchCallJSMethodNative(Runtime.java:1203)
LOG from device Galaxy S6: com.tns.Runtime.callJSMethod(Runtime.java:1070)
LOG from device Galaxy S6: com.tns.Runtime.callJSMethod(Runtime.java:1050)
LOG from device Galaxy S6: com.tns.gen.java.lang.Object_button_22_26_ClickListenerImpl.onClick(Object_button_22_26_ClickListenerImpl.java:18)
LOG from device Galaxy S6: com.tns.Runtime.callJSMethod(Runtime.java:1042)
LOG from device Galaxy S6: android.view.View.performClick(View.java:6205)
LOG from device Galaxy S6: android.widget.TextView.performClick(TextView.java:11103)
LOG from device Galaxy S6: android.view.View$PerformClick.run(View.java:23653)
LOG from device Galaxy S6: android.os.Handler.handleCallback(Handler.java:751)
LOG from device Galaxy S6: android.os.Looper.loop(Loop...
LOG from device Galaxy S6: android.os.Handler.dispatchMessage(Handler.java:95)

[tsonevn]

HI @nkemerchou,
Make sure that you are using the latest version of the Preview app.

[nkemerchou]

Hi
I think that the issue is deeper than that! I just re-installed the "preview" and the "playground" but still the exact same issue!!, wondering if this project is running on an Android device for any one!?

Please advice!

Thank!

[DimitarTachev]

Hi @nkemerchou,

Thanks for providing a sample application.

It seems that you've faced a very strange Angular issue. When providing an ErrorHandler, you have to declare it with the export keyword. In other words, open your app.module.ts and replace:

class MyErrorHandler implements ErrorHandler {

with:

export class MyErrorHandler implements ErrorHandler {

After applying this change, the errors are much more readable and you will have to apply a few additional changes (mainly because when you provide a path relative to the app root, you need to use ~ instead of .):

app.module.ts:
Remove the deprecated NgModuleFactoryLoader registration as its causing issue in tns preview (remove the following line):

{ provide: NgModuleFactoryLoader, useClass: NSModuleFactoryLoader }

src/app/app-routing.module.ts
Update your route paths:
replace:

loadChildren: "./app/tabs/tabs.module#TabsModule"

with:

loadChildren: "~/app/tabs/tabs.module#TabsModule"

src/app/tabs/tabs.module.ts
replace:

loadChildren: "./app/player/players.module#PlayersModule",

with:

loadChildren: "~/app/player/players.module#PlayersModule",

replace:

loadChildren: "./app/team/teams.module#TeamsModule"

with:

loadChildren: "~/app/team/teams.module#TeamsModule"

I also recommend you try the [email protected] release by executing the following commands:

1. npm i nativescript@latest -g
2. cd <your-project-root>
3. tns migrate
4. npm i @angular-devkit/[email protected] --save-dev (we've missed it in the migrate command)