angular - 使用 Angular 返回 404 的路由

Question

复制 ng 构建文件时，主机服务器上的路由组件出现了这个问题。但是在 localhost: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);

Answer 1

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

{
提供:位置策略，
使用类:HashLocationStrategy
},

一旦你添加了这个，你就可以按照下面的指南正确地实现哈希路由。如果您使用 jsonwebtokens 或 Auth0 执行身份验证，this question应该可以帮助您指明正确的方向。