使用角度路由返回錯誤404

當複製ng構建文件時，主機服務器上的路由組件存在此問題。但是在localhost：4200（本地開發）中，所有路徑都能正常工作。

所以例如這條路線不包含任何AuthGuard。

本地主機

本地主機：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）

來源

2017-04-12 exequielc

的[角2 Auth0路由錯誤404]（http://stackoverflow.com/questions/43234947/angular-2-with-auth0-routing-error-404）可能的複製 –

我已經將此問題標記爲重複項，但無論如何都會在此處回答，因爲上下文中存在一些細微差異。解決此問題的一種方法是使用HashLocationStrategy。您可以包括你的app.module.ts文件的供應商陣列中的這些行：

{ provide: LocationStrategy, useClass: HashLocationStrategy },

一旦你已經添加了這個，你可以按照下面的指導，正確地執行哈希路由。如果您使用jsonwebtokens或Auth0進行身份驗證，this question應該幫助您指出正確的方向。

來源

2017-04-12 22:18:45

多數民衆贊成沒關係，但網址現在有這個＃上的URL路徑是正確的？ http://trainer.amalgamesoft.com/#/myworkouts/exe – exequielc

這是正確的。您可以使用該路由原則，或者正如我在答案中所說的那樣，使用HTML 5路由，並通過.htaccess –

配置服務器。是的，這就是現在URL的外觀。 @馬里奧的答案也是有效的 –

我看到你沒有使用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]

來源

2017-04-12 22:19:07

使用角度路由返回錯誤404

回答

相關問題