Angular Routing not working on URL Address bar

Question

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.

Can you update your question with the .htaccess content? to understand clearly need to see the .htaccess configurations. — Fahim Uddin
– Fahim Uddin, Commented Dec 26, 2018 at 15:31
I have added RewriteEngine on RewriteCond %{REQUEST_FILENAME} -s [OR] RewriteCond %{REQUEST_FILENAME} -l [OR] RewriteCond %{REQUEST_FILENAME} -d RewriteRule ^.*$ - [NC,L] RewriteRule ^(.*) /index.html [NC,L] in the .htaccess file but it is still not working. — Sumit Kumar Sagar
– Sumit Kumar Sagar, Commented Dec 27, 2018 at 7:56

Fahim Uddin · Accepted Answer · 2018-12-28 14:23:41Z

3

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

edited Dec 28, 2018 at 14:23

answered Dec 27, 2018 at 16:11

Fahim Uddin

7012 gold badges14 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Sumit Kumar Sagar Over a year ago

I did to edit app-routing.module.ts file as your recommendation and update the .htacces file as well. I added web.config file at the "/var/www/html/" folder as Angular doc is documented. I wanted to try Nginx: use try_files, as described in Front Controller Pattern Web Apps, modified to serve index.html: Actually I don't know where I have to do this. And the App is still not working for deliberately URL hitting or refreshing the page.

Fahim Uddin Over a year ago

@Mohit , don't mixup nginx and apache to serve a single angular application. can you follow this piece of documentation ? https://github.com/mgechev/angular-seed/wiki/Deploying-prod-build-to-Apache-2

Sumit Kumar Sagar Over a year ago

Thank you so much. This document works for me. I was badly stuck in this. Thank you again!

Fahim Uddin Over a year ago

I am updating the answer, If I helped you please mark this answer as solved. Thanks.

Sumit Kumar Sagar Over a year ago

Hi @Fahim, I had followed the steps for my old instance on AWS EC2 server. But now I am shifted to new AWS EC2 instance and this time, https://github.com/mgechev/angular-seed/wiki/Deploying-prod-build-to-Apache-2 link is failed for deliberately routes.

Collectives™ on Stack Overflow

Angular Routing not working on URL Address bar

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related