Routing with Angular return 404

Question

I've this problem with Routing Component on the Host server when copy the ng build files. But on the localhost:4200 ( local development ) all routes work perfectly.

So for example this route that does not contain any AuthGuard.

localhost

localhost:4200/vendo - I can see the component

on server

exapme.mysite.com/vendo - Only see the error 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);

Possible duplicate of Angular 2 with Auth0 routing error 404 — Jack Clancy

Jack Clancy Jack Clancy · Accepted Answer · 2017-04-12T22:18:45

I have flagged this question as a duplicate but will answer it here anyway because there are some slight differences in context. A way to fix this issue is using HashLocationStrategy. You can include these lines in the provider array of your app.module.ts file:

{ provide: LocationStrategy, useClass: HashLocationStrategy },

Once you have added this, you can follow the guide below to correctly implement hash routing. If you are using jsonwebtokens or Auth0 to perform authentication, this question should help point you in the right direction.

Routing with Angular return 404

2 Answers