路由器在 Android 中无法工作（带电容器的 Angular 18）

Question

我在 Angular 18 中构建应用程序并使用电容器生成 APK。我没有使用离子。

这个简单的应用程序有 2 个组件

listing

和

detail

。该应用程序在网络路由方面运行良好。 问题是当我使用电容器并构建 Android 应用程序时，路由不起作用。

列出 HTML

<div class="node"
    [ngClass]="ind.color"
    [style]="{ top: ind.top, left: ind.left }"
    (click)="showDetail(ind.id)">
<div class="name">{{ ind.name }}</div>
    <div class="handle">{{ ind.handle }}</div></div>

列出组件.ts

showDetail(id: number):void {
    this.router.navigate(['/detail', 1]);}

路由.ts

  {
    path: '',
    component: HomeComponent
  },
  {
    path: 'detail/:id',
    component: DetailComponent
  }

我做错的地方，这对我来说真的是漫长的一天:/

Answer 1

检查您的电容器配置文件并确保 “webDir” 指向构建路径（最有可能是 “www”）。

const config: CapacitorConfig = {
  appId: 'com.company.appname',
  appName: 'My Capacitor App',
  webDir: 'www',
};

参考：https://capacitorjs.com/docs/config

另外，从下面的官方文档中检查 android 配置是否正确：

参考：https://capacitorjs.com/docs/android/configuration

如果您可以提供有关问题的更多详细信息，那么我们可以进一步讨论如何解决它。