Angular 带角度返回404的布线

复制ng生成文件时，主机服务器上的路由组件存在此问题。 但是在localhost:4200（localdevelopment）上，所有路由都可以完美地工作

例如，此路由不包含任何AuthGuard

localhost

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);

---

我已经将这个问题标记为一个重复的问题，但无论如何，我会在这里回答它，因为在上下文中有一些细微的差异。解决此问题的一种方法是使用

HashLocationStrategy

。您可以在app.module.ts文件的提供程序数组中包含以下行：

{
提供：定位策略，
useClass:HashLocationStrategy
}，

---

一旦添加了这个，就可以按照下面的指南正确实现哈希路由。如果您正在使用jsonwebtokens或Auth0执行身份验证，这将有助于为您指明正确的方向

我发现您没有使用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]

---

这可能是重复的，但是URL现在在URL路径上有这个#是正确的吗？这是正确的。您可以使用该路由原则，或者正如我在回答中所说的，使用HTML5路由，并使用in.htaccessYes配置您的服务器，这就是URL现在的外观@马里奥的回答也是正确的