Angular redirect url in production-CodePudding

I have a problem when I make my application available in a production environment. Routes do not work generating 404 error What do I need to change in my project to be able to work the routes in this environment?

My local: http://localhost:4200/test

Production: http://my-app/test

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

import { TestComponent } from './tests/test.component';
import { SideNavComponent } from './side-nav/side-nav.component';

const routes: Routes = [
  { path: 'test', component: TestComponent },
];

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

Http:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title></title>
    <base href="/" />
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, user-scalable=0, minimal-ui"
    />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="description" content="" />
    <meta name="keywords" content="" />

    <!-- Favicon icon -->
    <link rel="icon" type="image/x-icon" href="favicon.ico" />
    <link
      href="https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap"
      rel="stylesheet"
    />
    <link
      href="https://fonts.googleapis.com/icon?family=Material Icons"
      rel="stylesheet"
    />
  </head>
  <body >
    <app-root></app-root>
  </body>
</html>

CodePudding user response：

i think you must use HashLocationStrategy for routing. check this : https://angular.io/api/common/HashLocationStrategy

CodePudding user response：

There is configuring options for route present as boolean flag. Option name is useHash. By default it is false you need to make it true to load your routes with hash. Changes tobe made in app-routing.module.ts

RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules, useHash:true })

Now if you still want your routes without hash then you need to modify your server settings. Below are settings to be done at apache2. Follow below link.

https://ngmilk.rocks/2015/03/09/angularjs-html5-mode-or-pretty-urls-on-apache-using-htaccess/