CODEWITHSUNDEEP
amazon-ec2deploymentangular6angular-routing
Sumit Kumar Sagar
Sumit Kumar Sagar

Reputation: 33

Angular Routing not working on URL Address bar

I have made an Angular project with routing components. And I have handled some URL handling like if a user hits on the URL manually: if the URL exist, it goes to the URL components as defined in the app-routing-module.ts and if the URL doesn't exist, it shows an error page as defined in the code PagenotFoundComponent. e.g.

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

import {HomeComponent} from './component/home.component';
import {AboutusComponent} from './component/aboutus.component';
import {SupportComponent} from './component/support.component';
import {PurchaseComponent} from './component/purchase.component';
import {PagenotfoundComponent} from './component/pagenotfound.component';
import {HowitworksComponent} from './component/howitworks.component';
import {ProductComponent} from './component/product.component';
import { ProductVarientDetailsComponent } from './component/product-varient-details.component';

const routes: Routes = [
  { path: '', redirectTo: '/home', pathMatch: 'full'},
  { path: 'home', component: HomeComponent},
  { path: 'about-us', component: AboutusComponent},
  { path: 'how-it-works', component: HowitworksComponent},
  { path: 'support', component: SupportComponent},
  { path: 'purchase', component: PurchaseComponent},
  { path: 'product/:name/details', component: ProductComponent},
  { path: 'product-variants', component: ProductVarientDetailsComponent},
  { path: '**', component: PagenotfoundComponent}
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }
export const routingComponents = [HomeComponent, AboutusComponent, SupportComponent,
                                  PurchaseComponent, PagenotfoundComponent, HowitworksComponent,
                                  ProductComponent, ProductVarientDetailsComponent];

So when I manually hit localhost:4200/home, it shows me HomeComponent Page and if I do this localhost:4200/sdnbgbdfgbh, it shows me PagenotfoundComponent Page on the local server.

And then I went to this link: https://angular.io/guide/deployment to deploy my angular application. I follow the steps as the doc. says.

My application is now working completely but when I do some manual url typing it shows me Apache Server Page Not Found. Just this thing is not working in the Angular App.

I have deployed my App on AWS EC2 on Apache Server at PORT 80.

Upvotes: 0

Views: 5220

Answers (1)

Fahim Uddin
Fahim Uddin

Reputation: 701

Try redirecting to path 404 like this :

const routes: Routes = [
   ...otherRoutes
   { path: '404', component: PagenotfoundComponent},
   { path: '**', redirectTo: '404'}
];

If not working try to configure .htaccess according to Angular Documentation :

RewriteEngine On
# If an existing asset or directory is requested go to it as it is
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR]
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d
RewriteRule ^ - [L]
# If the requested resource doesn't exist, use index.html
RewriteRule ^ /index.html

Remember all path hits should go through index.html in apache config.

Or try this piece of documentation, I hope it helps :

https://github.com/mgechev/angular-seed/wiki/Deploying-prod-build-to-Apache-2

Upvotes: 3

Related Questions