Question

使用angular

在主机服务器上路由

复制ng构建文件时，主机服务器上的路由组件出现此问题。但是在本地主机：4200（本地开发）上，所有路线都运行良好。

例如，这条路线不包含任何AuthGuard。

本地主机

localhost：4200 / vendo - 我可以看到组件

服务器上的

exapme.mysite.com/vendo - 仅查看错误404

app.routing.ts

import { Routes, RouterModule } from '@angular/router';

import { HomeComponent } from './home/index';
import { LoginComponent } from './login/index';
import { RegisterComponent } from './register/index';
import { AuthGuard } from './_guards/index';
import { EstadoComponent} from  './_estadoactual/estado.component'
import {PublicarComponent} from "./_admin_apk/publicar.component";
import {PidoComponent} from "./pido/pido.component";
import {DepoComponent} from "./depo/depo.component";
import {DepoChessComponent} from "./depochess/depochess.component";
import {ProductosComponent} from "./productos/productos.component";
import {SamComponent} from "./sam/sam.component";
import {VendoComponent} from "./vendo/vendo.component";
import {SamdplusComponent} from "./samdplus/samdplus.component";
import {GcmComponent} from "./gcm/gcm.component";
import {GcmNotificationComponent} from "./gcm/gcm-notification.component";

const appRoutes: Routes = [

    { path: 'ada2/login', component: LoginComponent  },
    { path: 'ada2/depo', component: DepoComponent },
    { path: 'ada2/pido', component: PidoComponent },
    { path: 'ada2/vendo', component: VendoComponent},
    { path: 'ada2/sam', component: SamComponent },
    { path: 'ada2/samdplus', component: SamdplusComponent},
    { path: 'ada2/depochess', component: DepoChessComponent },
    { path: '', component: HomeComponent, canActivate: [AuthGuard]  },
    { path: 'ada2', component: HomeComponent, canActivate: [AuthGuard]},
    { path: 'ada2/home', component: HomeComponent, canActivate: [AuthGuard] },
    { path: 'ada2/publicar', component: PublicarComponent, canActivate: [AuthGuard] },
    { path: 'ada2/register', component: RegisterComponent, canActivate: [AuthGuard] },
    { path: 'ada2/estado', component: EstadoComponent, canActivate: [AuthGuard] },
    { path: 'ada2/productos', component: ProductosComponent, canActivate: [AuthGuard] },
    { path: 'ada2/gcm', component: GcmComponent, canActivate: [AuthGuard] },
    { path: 'ada2/gcmnotification', component: GcmNotificationComponent, canActivate: [AuthGuard] },
    // otherwise redirect to home
    { path: '**', redirectTo: '' }
];

export const routing = RouterModule.forRoot(appRoutes);

有人可以告诉我我做错了什么吗？

PD。服务器是XAMP捆绑包。（PHP，APACHE，MYSQL）

Answer 1

我已将此问题标记为重复，但无论如何都会在此处回答，因为上下文中存在一些细微差别。解决此问题的方法是使用HashLocationStrategy。您可以在app.module.ts文件的提供程序数组中包含以下行：

{ provide: LocationStrategy, useClass: HashLocationStrategy },

添加完成后，您可以按照以下指南正确实现哈希路由。如果您使用jsonwebtokens或Auth0执行身份验证，this question应该可以帮助您指明正确的方向。

Answer 2

我发现你没有使用HashLocationStrategy。这意味着您需要设置服务器以处理到index.html文件的路由。

这让我的项目在wamp服务器上运行。编辑.htaccess文件：

Options -Indexes

RewriteEngine on

    RewriteCond %{REQUEST_FILENAME} -s [OR]
    RewriteCond %{REQUEST_FILENAME} -l [OR]
    RewriteCond %{REQUEST_FILENAME} -d
    RewriteRule ^.*$ - [NC,L]
    RewriteRule ^(.*) index.html [NC,L]

具有角度返回的路由错误404

2 个答案: