CODEWITHSUNDEEP
angular
natn2323
natn2323

Reputation: 2061

New to Angular 9, redirecting works but going directly to URL does not

I have a very simple routing module in Angular 9.

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { CalculatorsComponent } from './calculators/calculators.component';

const routes: Routes = [
  { path: 'calculators', component: CalculatorsComponent },
  { path: '', redirectTo: '/calculators', pathMatch: 'full' },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

I'm running a local server, and when I go to http://localhost:4200, it properly redirects me to http://localhost:4200/calculators. However, if I try to access http://localhost:4200/calculators directly either by entering it in my address bar or by refreshing the page after it redirects, I get a 404 status code and Cannot GET /calculators as a response.

I feel like this is just how Angular works as a Single Page Application, but please correct me if I'm wrong. If this is expected, how would I deal with my website when a user tries to navigate to http://localhost:4200/calculators. I would expect that they should be able to access that URL without having to navigate through the root view to the /calculators view.

Upvotes: 0

Views: 40

Answers (1)

satanTime
satanTime

Reputation: 13574

The problem is in how you run the angular app.

If it's inside of nginx or apache you need to configure rewrites.

for nginx

    location / {
        index index.html;
        try_files $uri /index.html;
    }

for apache you need to add / change .htaccess in the root dir

RewriteEngine on
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ /index.html

Upvotes: 1

Related Questions