延迟加载无法找到模块

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.

我尝试了各种形式的路径，包括〜/，/。/ etc，但仍然没有快乐。

我也尝试过使用tns update以防万一有些事情已经过时了。在网上看，我可以在他们的github上看到一些类似的问题，它已经发现了几个线索（确保没有大写的文件名等），但没有任何运气。

如果重要，我正在使用Windows 10。

是否有任何常见错误我应该注意，或者是否有任何工具或日志我可以调查以尝试获取更多详细信息？

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

我的app目录结构是：

• 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文件夹中，就像这样