Question

我是nativescript的新手-刚刚安装了它，所以所有内容都应该是最新的。我一直在努力按照nativescript网站上的指南进行延迟加载：

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

我遵循了这封信的指南，只是添加了一个空服务，并为组件提供了模板字符串。在android模拟器中运行时，出现以下异常：

 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.

我尝试了各种形式的路径，包括〜/，/ ./等，但还是没有乐趣。

我还尝试使用tns update，以防万一过时了。在网上环顾四周，我可以在他们的github上看到一些类似的问题，该问题已经发现了一些线索（确保没有大写文件名等），但是没有运气。

如果有关系，我正在使用Windows10。

我是否应该寻找一些常见的错误，或者我可以调查以获取更多详细信息的任何工具或日志？

这是我的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 { }

我的应用目录结构为：

src
- 应用
  - 功能
    - feature.component.ts
    - feature.module.ts
    - feature.service.ts
    - feature.routing.ts
- app.module.ts
- app.routing.ts
- 等

修改

进行了较大的编辑，然后在文件名中发现了一个错字。修复了该问题，它现在似乎可以正常工作。但是，我仍然无法通过相对路径loadChildren:在应用级路由器中使用./app/feature/...，但是~/feature/...无效。

更新为〜/ feature会导致以下异常：

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...

我的tsconfig文件具有以下条目：

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

我找到了以下链接，这似乎意味着我应该更新〜/别名以指向/ app（我尝试过），但仍然存在相同的问题。我也尝试用./src/app

更新

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

Answer 1

我面临着同样的问题。我闲逛了一下，通过在loadChildren内添加./app/字符串来工作，就像这样在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"
}
];

及其工作原理（如果从某个组件（例如从home.component.html路由到延迟加载的模块）

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

，并且如果您将延迟加载的模块作为第一条路线，则可以正常工作。但是所有这些还取决于项目结构，通常情况下，您有一个结构，将模块放在app文件夹中，就像这样

延迟加载无法找到模块

1 个答案: