Angular 13 on refresh page not found showing-CodePudding

I have 2 issues in angular 13. I'm new to angular, so I don't know how can i solve this. Question1: I'm building a website in angular 13, I have completed my work. when I deploy the website to my server it's working, but when I refresh the page, the page is not found display my route code

{ path: '', redirectTo: 'home', pathMatch: 'full' },
  { path: 'home', component : HomeComponent },
  {
    path: 'form', 
    component : FormComponent
  },
  {
    path: 'dashboard', 
    component : DashboardComponent
  }

I don't want to use the hash method, because the URL does not look nice is there any way to resolve this issue? Currently, I'm hosting this website on a hostinger server. in the future will host in azure cloud. Question2: When I build my project and upload it to the server, the screen show blank. but when I put (.)Dot before hash in index.html base URL, then its work

 <base href="./" />

Please guide me how its happen, and how to solve this

CodePudding user response：

For your 1st question, I guess you need to add one slash before to home in redirectTo might be it can resolve your issue.

 { path: '', redirectTo: '/home', pathMatch: 'full' }, <=== here in redirect it changes rest will be same.

 { path: 'home', component : HomeComponent },

About your 2nd question, you can dynamically set the base href in angular like the below example.

export function setBaseHrefDyanmic() {
let basePath: string = 'my-website' || ''; 
return '/'   basePath;
};

You can create the above new function in your app.module.ts file and add this into the providers array of app.module.ts file like below.

providers:[{ provide: APP_BASE_HREF, useFactory: setBaseHrefDyanmic}]

CodePudding user response：

You need to configure your server config file or .htaccess file

For example, If you are using Nginx server then pretty simple.

Edit you config file with

sudo nano /etc/nginx/sites-available/your_domain

location / {
            # First attempt to serve request as file, then
            # as directory, then fall back to displaying a 404.
            # try_files $uri $uri/ =404;

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

Hope this will help ;)