CODEWITHSUNDEEP
nativescriptnativescript-angular
user2179721
user2179721

Reputation:

Lazyloading unable to find module

I'm new to nativescript - just installed it, so everything shoud be up-to-date. I've been trying to get lazy loading to work by following the guide on the nativescript website:

https://docs.nativescript.org/performance-optimizations/lazy-loading#implementing-lazy-loading-in-nativescript

I've followed the guide to the letter, only adding an empty service and providing a component with a template string. On running in the android emulator, I get the following exception:

 JS: ERROR Error: Uncaught (in promise): Error: com.tns.NativeScriptException: Failed to find module: "feature/feature.module", 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_view_31_32_TouchListenerImpl.onTouch(Object_view_31_32_TouchListenerImpl.java:18)
JS:     android.view.View.dispatchTouchEvent(View.java:11721)
JS:     android.view.ViewGroup.dispatchTransformedTouchEvent(ViewGroup.java:2961)
JS:     android.view.ViewGroup.dispatchTouchEvent(ViewGroup.java:2650)
JS:     android.view.ViewGroup.dispatchTransformedTouchEvent(ViewGroup.java:2961)
JS:     android.view.ViewGroup.dispatchTouchEvent(...
Executing before-prepare hook from C:\apps\stoiccompanion\hooks\before-prepare\nativescript-dev-typescript.js
Hook skipped because either bundling or livesync is in progress.
Preparing project...
Project successfully prepared (Android)
Successfully transferred app.routing.js.
Refreshing application...
Successfully synced application org.nativescript.StoicCompanion on device emulator-5554.
JS: Angular is running in the development mode. Call enableProdMode() to enable the production mode.

I've tried varous forms of path including ~/, / ./ etc, but still no joy.

I've also tried to use tns update in case something is out of date. Looking around online, I can see a few similar issues on their github, which has uncovered a couple of leads (ensure there are no uppercase filenames etc), but not have any luck.

If it matters, I'm using Windows 10.

Are there any common errors I should be looking out for, or are there any tools or logs I can investigate to try and get more details?

Here is my app.route

// app/app.routing.ts
import { NgModule } from "@angular/core";
import { NativeScriptRouterModule } from "nativescript-angular/router";
import { Routes } from "@angular/router";

import { ItemsComponent } from "./item/items.component";
import { ItemDetailComponent } from "./item/item-detail.component";

const routes: Routes = [
    { path: "", redirectTo: "/items", pathMatch: "full" },
    { path: "items", component: ItemsComponent },
    { path: "item/:id", component: ItemDetailComponent },
    { path: "feature", loadChildren: "~/feature/feature.module#FeatureModule" }, // lazy loaded module
];

@NgModule({
    imports: [NativeScriptRouterModule.forRoot(routes)],
    exports: [NativeScriptRouterModule]
})
export class AppRoutingModule { }

My app directory structure is:

Edit

Wrote a big edit, then found a typo in the filenames. Fixed that and it would appear to be working now. However, I still cant use loadChildren: in the app level router using a relative path ./app/feature/... works, but ~/feature/... doesnt.

Updating to ~/feature results in the following exception:

JS: Angular is running in the development mode. Call enableProdMode() to enable the production mode.
JS: ERROR Error: Uncaught (in promise): Error: com.tns.NativeScriptException: Failed to find module: "~/feature/feature.module", relative to: /app/
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_view_31_32_TouchListenerImpl.onTouch(Object_view_31_32_TouchListenerImpl.java:18)
JS:     android.view.View.dispatchTouchEvent(View.java:11721)
JS:     android.view.ViewGroup.dispatchTransformedTouchEvent(ViewGroup.java:2961)
JS:     android.view.ViewGroup.dispatchTouchEvent(ViewGroup.java:2650)
JS:     android.view.ViewGroup.dispatchTransformedTouchEvent(ViewGroup.java:2961)
JS:     android.view.ViewGroup.dispatchTouchEvent(ViewGroup...

My tsconfig file has the following entry:

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

I found the following link, which seems to imply I should update the ~/ alias to point to /app, which I tried, but still had the same problem. I also tried to update with ./src/app

https://github.com/NativeScript/nativescript-dev-webpack/issues/372

Upvotes: 0

Views: 825

Answers (1)

anas munir
anas munir

Reputation: 182

I was facing the same problem. I dabbled around, and it worked by adding ./app/ string inside loadChildren, like so Inside app-routing.module.ts

const routes: Routes = [
{
    path: "",
    redirectTo: "/home",
    pathMatch: "full"
},
{
    path: "home",
    component: HomeComponent

},
{
    path: "collection",
    loadChildren: "./app/collection/collection.module#CollectionModule"
},
{
    path: "product",
    loadChildren: "./app/product/product.module#ProductModule"
}
];

and its working if routed to a lazy loaded module from a component, such as from home.component.html

<Button text="home works!" class="btn btn-primary" [nsRouterLink]="['/collection']"></Button>

and it's working if you make a lazy loaded module as a first route. But all of this would also depend on the project structure, normally in angular you have a structure, where you put the modules inside the app folder, like so

enter image description here

Upvotes: 1

Related Questions