时间戳

首页 > 解决方案 > 为什么页面链接在 Cordova Angular 中不起作用？

angular - 为什么页面链接在 Cordova Angular 中不起作用？

问题描述

我有一个角度应用程序。我将该应用程序转换为 Cordova 中的 android 应用程序。主页正常工作，但角度路由链接不起作用。以下是我的 Cordova index.html 和路线链接

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="apple-touch-icon" sizes="76x76" href="assets/img/apple- 
icon.png">
<link rel="icon" type="image/png" href="assets/img/favicon.png">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>Now UI Kit Angular by Creative Tim</title>
<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, 
user-scalable=0, shrink-to-fit=no' name='viewport' />
<base href="./">
<!--     Fonts and icons     -->
<link href="https://fonts.googleapis.com/css? 
family=Montserrat:400,700,200" rel="stylesheet" />
<link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" 
rel="stylesheet">
</head>
<body class="sidebar-collapse">
<app-root></app-root>
<script type="text/javascript" src="runtime.js"></script><script 
type="text/javascript" src="polyfills.js"></script><script 
type="text/javascript" src="styles.js"></script><script 
type="text/javascript" src="scripts.js"></script><script 
type="text/javascript" src="vendor.js"></script><script 
type="text/javascript" src="main.js"></script></body>
</html>



const routes: Routes =[
{ path: '', redirectTo: 'index', pathMatch: 'full' },
{ path: 'index',                component: ComponentsComponent },
{ path: 'nucleoicons',          component: NucleoiconsComponent },
{ path: 'examples/landing',     component: LandingComponent },
{ path: 'examples/login',       component: LoginComponent },
{ path: 'examples/profile',     component: ProfileComponent },
{ path: 'odia',     component: OdiaComponent }
];

标签： angularcordova

解决方案

我认为问题与基本 href 中的“点”有关：

<base href="./">

因此，如果您检查它并删除一个点，它会起作用，但是加载静态文件会出现问题。

我遇到了类似的问题，并通过以下方式解决了它：

  1. <base href="./">从您的index.html文件中删除
  2. 在您的主app.module.ts文件中添加下一个提供程序：
<your imports>
...
import {APP_BASE_HREF} from '@angular/common';

@NgModule({
  imports: [<your imports if are>...],
  exports: [<your exports if are>...],
  providers: [<your providers if are>...,
              {
                provide: APP_BASE_HREF, 
                useValue: '/'
              }]
})
  1. 然后重建你的科尔多瓦项目。应该管用

推荐阅读