search

NativeScript / nativescript-angular

Integrating NativeScript with Angular
http://docs.nativescript.org/angular/tutorial/ng-chapter-0
Apache License 2.0
1.21k stars 241 forks source link

Lazy Loading: Getting issue NavigationError(id: 3, url: '/events', error: Error: com.tns.NativeScriptException: Failed to find module: "rxjs-compat/add/observable/of", relative to: app/tns_modules/ #1575

Closed phatakrajan closed 5 years ago

phatakrajan commented 5 years ago

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):

    "tns-ios": {
      "version": "4.2.0"
    },
    "tns-android": {
      "version": "4.2.0"
    }
  },
  "description": "Test",
  "license": "SEE LICENSE IN <your-license-filename>",
  "repository": "<fill-your-repository-here>",
  "dependencies": {
    "@angular/animations": "~6.1.0",
    "@angular/common": "~6.1.0",
    "@angular/compiler": "~6.1.0",
    "@angular/core": "~6.1.0",
    "@angular/forms": "~6.1.0",
    "@angular/http": "~6.1.0",
    "@angular/platform-browser": "~6.1.0",
    "@angular/platform-browser-dynamic": "~6.1.0",
    "@angular/router": "~6.1.0",
    "nativescript-angular": "^6.1.0",
    "nativescript-checkbox": "^3.0.3",
    "nativescript-geolocation": "^4.3.1",
    "nativescript-google-maps-sdk": "^2.6.1",
    "nativescript-localize": "^3.0.6",
    "nativescript-ngx-fonticon": "^4.2.0",
    "nativescript-pdf-view": "^2.0.1",
    "nativescript-theme-core": "~1.0.4",
    "nativescript-ui-sidedrawer": "^4.3.1",
    "nativescript-webview-interface": "^1.4.2",
    "reflect-metadata": "~0.1.8",
    "rxjs": "^6.0.0",
    "tns-core-modules": "^4.2.1",
    "zone.js": "^0.8.26"
  },
  "devDependencies": {
    "@nativescript/schematics": "~0.3.0",
    "nativescript-dev-typescript": "^0.7.4",
    "typescript": "~2.7.2"
  },

Describe the bug I am trying to perform lazy loading in the app which i am trying to build. Here is the structure of App that i have

src -----app ---------app.routing.ts ---------app.module.ts ----------modules --------------events --------------notifications --------------authentication

Here are my routes in app.routing.ts

const routes: Routes = [
    { path: "", redirectTo: "/login", pathMatch: "full" },
    { path: "login", loadChildren: "~/app/modules/authentication/authentication.module#AuthenticationModule"},
    { path: "events", loadChildren: "~/app/modules/events/events.module#EventsModule"},
    { path: "notification", loadChildren: "~/app/modules/notifications/notifications.module#NotificationsModule"}
];

My first Lazy loaded module AuthenticationModule gets loaded correctly. However when i try to navigate on a button click within AuthenticationModule to EventsModule via command

        this._router.navigate([
            'events'
        ]);

it gives me following error

JS: NavigationError(id: 3, url: '/events', error: Error: com.tns.NativeScriptException: Failed to find module: "rxjs-compat/add/observable/of", relative to: app/tns_modules/
JS:     com.tns.Module.resolvePathHelper(Module.java:146)
JS:     com.tns.Module.resolvePath(Module.java:55)
JS:     com.tns.Runtime.callJSMethodNative(Native Method)
JS:     com.tns.Runtime.dispatchCallJSMethodNative(Runtime.java:1116)
JS:     com.tns.Runtime.callJSMethodImpl(Runtime.java:996)
JS:     com.tns.Runtime.callJSMethod(Runtime.java:983)
JS:     com.tns.Runtime.callJSMethod(Runtime.java:967)
JS:     com.tns.Runtime.callJSMethod(Runtime.java:959)
JS:     com.tns.gen.java.lang.Object_button_19_32_ClickListenerImpl.onClick(Object_button_19_32_ClickListenerImpl.java:17)
JS:     android.view.View.performClick(View.java:5637)
JS:     android.view.View$PerformClick.run(View.java:22429)
JS:     android.os.Handler.handleCallback(Handler.java:751)
JS:     android.os.Handler.dispatchMessage(Handler.java:95)
JS:     android.os.Looper.loop(Looper.java:154)
JS:     android.app.ActivityThread.main(Activit...
JS: NavigationError(id: 3, url: '/events', error: Error: com.tns.NativeScriptException: Failed to find module: "rxjs-compat/add/observable/of", relative to: app/tns_modules/
JS:     com.tns.Module.resolvePathHelper(Module.java:146)
JS:     com.tns.Module.resolvePath(Module.java:55)
JS:     com.tns.Runtime.callJSMethodNative(Native Method)
JS:     com.tns.Runtime.dispatchCallJSMethodNative(Runtime.java:1116)
JS:     com.tns.Runtime.callJSMethodImpl(Runtime.java:996)
JS:     com.tns.Runtime.callJSMethod(Runtime.java:983)
JS:     com.tns.Runtime.callJSMethod(Runtime.java:967)
JS:     com.tns.Runtime.callJSMethod(Runtime.java:959)
JS:     com.tns.gen.java.lang.Object_button_19_32_ClickListenerImpl.onClick(Object_button_19_32_ClickListenerImpl.java:17)
JS:     android.view.View.performClick(View.java:5637)
JS:     android.view.View$PerformClick.run(View.java:22429)
JS:     android.os.Handler.handleCallback(Handler.java:751)
JS:     android.os.Handler.dispatchMessage(Handler.java:95)
JS:     android.os.Looper.loop(Looper.java:154)
JS:     android.app.ActivityThread.main(Activit...
JS: ERROR Error: Uncaught (in promise): Error: com.tns.NativeScriptException: Failed to find module: "rxjs-compat/add/observable/of", relative to: app/tns_modules/
JS:     com.tns.Module.resolvePathHelper(Module.java:146)
JS:     com.tns.Module.resolvePath(Module.java:55)
JS:     com.tns.Runtime.callJSMethodNative(Native Method)
JS:     com.tns.Runtime.dispatchCallJSMethodNative(Runtime.java:1116)
JS:     com.tns.Runtime.callJSMethodImpl(Runtime.java:996)
JS:     com.tns.Runtime.callJSMethod(Runtime.java:983)
JS:     com.tns.Runtime.callJSMethod(Runtime.java:967)
JS:     com.tns.Runtime.callJSMethod(Runtime.java:959)
JS:     com.tns.gen.java.lang.Object_button_19_32_ClickListenerImpl.onClick(Object_button_19_32_ClickListenerImpl.java:17)
JS:     android.view.View.performClick(View.java:5637)
JS:     android.view.View$PerformClick.run(View.java:22429)
JS:     android.os.Handler.handleCallback(Handler.java:751)
JS:     android.os.Handler.dispatchMessage(Handler.java:95)
JS:     android.os.Looper.loop(Looper.java:154)
JS:     android.app.ActivityThread.main(ActivityThread.ja...

I have enabled routetracing and get below message before getting this exception

JS: NavigationStart(id: 3, url: '/events')
JS: NavigationStart(id: 3, url: '/events')
JS: Router Event: RouteConfigLoadStart
JS: RouteConfigLoadStart(path: events)
JS: RouteConfigLoadStart(path: events)
JS: Router Event: NavigationError

To Reproduce Above steps should be able to reproduce issue

Expected behavior

Lazy loading should work fine and load EventsModule.

Sample project

Additional context Found this issue reported in multiple forums. Here are things which i have already tried

  1. platform, hooks and node_modules removed and then tns run android was again failed.
  2. Verified there are no modules/components with capital letter beginning.
  3. Verified tsconfig.json and its as per latest template
tsonevn commented 5 years ago

HI @phatakrajan, This error can appear if you have import rxjs module in some of your Angular component or modules like this -> import 'rxjs/add/observable/of'. To solve the issue, you can remove the rxjs import or replace it with import {of} from 'rxjs'.

phatakrajan commented 5 years ago

@tsonevn That was indeed right observation. I had one entry remaining. However the issue I am facing with lazy loading still does not go away. After looking at stack traces I find that something is getting loaded via incorrect path.

System.err: Error: com.tns.NativeScriptException: Failed to find 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:553) System.err: com.tns.Runtime.run(Runtime.java:545) System.err: com.tns.NativeScriptApplication.onCreate(NativeScriptApplication.java:21) System.err: android.app.Instrumentation.callApplicationOnCreate(Instrumentation.java:1024) System.err: android.app.ActivityThread.handleBindApplication(ActivityThread.java:5403) System.err: android.app.ActivityThread.-wrap2(ActivityThread.java) System.err: android.app.ActivityThread$H.handleMessage(ActivityThread.java:1545) System.err: android.os.Handler.dispatchMessage(Handler.java:102) System.err: android.os.Looper.loop(Looper.java:154) System.err: android.app.ActivityThread.main(ActivityThread.java:6119) System.err: java.lang.reflect.Method.invoke(Native Method) System.err: com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:886) System.err: com.android.internal.os.ZygoteInit.main(ZygoteInit.java:776) System.err: File: ", line: 1, column: 265 System.err: System.err: StackTrace: System.err: Frame: function:'require', file:'', line: 1, column: 266 System.err: Frame: function:'', file:'file:///data/data/org.advantage.uma.fieldmgmt/files/app/app/modules/shared/shared.module.js', line: 6, column: 10 System.err: Frame: function:'require', file:'', line: 1, column: 266 System.err: Frame: function:'', file:'file:///data/data/org.advantage.uma.fieldmgmt/files/app/app/app.module.js',line: 17, column: 23 System.err: Frame: function:'require', file:'', line: 1, column: 266 System.err: Frame: function:'', file:'file:///data/data/org.advantage.uma.fieldmgmt/files/app/main.js', line: 5, column: 20 System.err: Frame: function:'require', file:'', line: 1, column: 266 System.err: System.err: System.err: Error: com.tns.NativeScriptException: Failed to find 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:553) System.err: com.tns.Runtime.run(Runtime.java:545) System.err: com.tns.NativeScriptApplication.onCreate(NativeScriptApplication.java:21) System.err: android.app.Instrumentation.callApplicationOnCreate(Instrumentation.java:1024) System.err: android.app.ActivityThread.handleBindApplication(ActivityThread.java:5403) System.err: android.app.ActivityThread.-wrap2(ActivityThread.java) System.err: android.app.ActivityThread$H.handleMessage(ActivityThread.java:1545) System.err: android.os.Handler.dispatchMessage(Handler.java:102) System.err: android.os.Looper.loop(Looper.java:154) System.err: android.app.ActivityThread.main(ActivityThread.java:6119) System.err: java.lang.reflect.Method.invoke(Native Method) System.err: com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:886) System.err: com.android.internal.os.ZygoteInit.main(ZygoteInit.java:776) System.err: File: ", line: 1, column: 265 System.err: System.err: StackTrace: System.err: Frame: function:'require', file:'', line: 1, column: 266 System.err: Frame: function:'', file:'file:///data/data/org.advantage.uma.fieldmgmt/files/app/app/modules/shared/shared.module.js', line: 6, column: 10 System.err: Frame: function:'require', file:'', line: 1, column: 266 System.err: Frame: function:'', file:'file:///data/data/org.advantage.uma.fieldmgmt/files/app/app/app.module.js',line: 17, column: 23 System.err: Frame: function:'require', file:'', line: 1, column: 266 System.err: Frame: function:'', file:'file:///data/data/org.advantage.uma.fieldmgmt/files/app/main.js', line: 5, column: 20 System.err: Frame: function:'require', file:'', line: 1, column: 266 System.err: System.err: at com.tns.Runtime.runModule(Native Method) System.err: at com.tns.Runtime.runModule(Runtime.java:553) System.err: at com.tns.Runtime.run(Runtime.java:545) System.err: at com.tns.NativeScriptApplication.onCreate(NativeScriptApplication.java:21) System.err: at android.app.Instrumentation.callApplicationOnCreate(Instrumentation.java:1024) System.err: at android.app.ActivityThread.handleBindApplication(ActivityThread.java:5403)

Please note that i had existing code structure which directly had app folder (code structure created with NS 3.4.1) .As per new code structure, path is src/app/modules/shared. However stack trace shows that these modules are getting loaded via incorrect path. The way i am migrating is that i created a new codebase via tns create command and am now porting my modules in new code. Is there any setting that i need to validate?

tsonevn commented 5 years ago

Hi @phatakrajan, Can you send us the project sample one, which can be used for debugging?

phatakrajan commented 5 years ago

@tsonevn Added you as a collaborator on my project. I am getting error in sample project as well.

phatakrajan commented 5 years ago

@tsonevn I learnt from NativeScript website that we need to use paths with ~ while specifying module paths. It resolved my problem in test app. However if I repeat the same in my actual production app, I still get same error. Any idea?

tsonevn commented 5 years ago

Hi @phatakrajan, I was able to recreate the issue on my side with the project, that I have access. To solve the issue you should replace ./modules/authentication/authentication.module#AuthenticationModule with ~/app/modules/authentication/authentication.module#AuthenticationModulein app.routing.ts. Keep in mind that ~/ points to src folder.