Deploy single page application Angular: 404 Not Found nginx

Question

I Have an Angular application. I run the command ng build --prod --aot to generate the dist folder. In the dist folder I created a file named Staticfile then I uploaded the dist folder to pivotal.io with the following commands:

1. cf push name-app --no-start
2. cf start name-app

The app runs well. I have a nav bar, so when I change the path with navbar everything works fine. But when I do it manually (I enter the url myself) I have this error 404 Not Found nginx. This my app.component.ts:

const appRoutes: Routes = [
  { path: 'time-picker', component: TimePickerComponent },
  { path: 'material-picker', component: MaterialPickerComponent },
  { path: 'about', component: AboutComponent },
  { path: 'login', component: LoginComponent },
  { path: 'registration', component: RegistrationComponent },
  {
    path: '',
    redirectTo: '/time-picker',
    pathMatch: 'full'
  }
];

@NgModule({
  declarations: [
    AppComponent,
    TimePickerComponent,
    MaterialPickerComponent,
    DurationCardComponent,
    AboutComponent,
    LoginComponent,
    RegistrationComponent,
  ],
  imports: [RouterModule.forRoot(
    appRoutes
    // ,{ enableTracing: true } // <-- debugging purposes only
  ),
    FormsModule,
    BrowserAnimationsModule,
    BrowserModule,
    MdCardModule, MdDatepickerModule, MdNativeDateModule, MdInputModule

  ],
  providers: [{ provide: DateAdapter, useClass: CustomDateAdapter }],
  bootstrap: [AppComponent]
})
export class AppModule {
  constructor(private dateAdapter: DateAdapter<Date>) {
    this.dateAdapter.setLocale('fr-br');
  }
}

Solution 1

I finally found the answer: After I generated the dist folder.

• I created a file called Staticfile and put it in the dist folder
• I opened Staticfile & I added this line pushstate: enabled

pushstate enabled keeps browser-visible URLs clean for client-side JavaScript apps that serve multiple routes. For example, pushstate routing allows a single JavaScript file route to multiple anchor-tagged URLs that look like /some/path1 instead of /some#path1.

Solution 2

for those not using a Staticfile might wanna try this.

I had the same problem with nginx serving angular. The following is the default config file, probably found somewhere in /etc/nginx/sites-available/yoursite

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

but what we acctually want is...

     location / {
            # First attempt to serve request as file, then
            # as directory, then redirect to index(angular) if no file found.
            try_files $uri $uri/ /index.html;
    }

Solution 3

In your nginx.conf file try using:

try_files $uri $uri/ /index.html;

instead of:

try_files $uri $uri/ =404;

That worked for me on Angular 5 project.

Solution 4

This is a problem with the server side not the Angular side of things . It is the servers responsibility to return the index or the landing page for each request in your case nginx.

UPDATE

If you by any means do not have a backend or server where you can configure this there are two workarounds.

• Using HashLocationStrategy in Angular
• Making some tweak in index.html file link No -15

Solution 5

For me it was a permission issue, Nginx has to be the owner of the directory where you put your dist, i've seen this error in the nginx log file

"root/../../dist/index.html" failed (13: Permission denied)

so i gave permissions to nginx user on the top folder containing my dist

chown nginx . -R //  to give nginx the permissions on the current directory, and everything in it.

and then you have to restart nginx

sudo systemctl restart nginx

and it should work!

View more solutions

Comments

[Melchia]

I don't have nginx config, the only steps I did are the ones I wrote above. I just added a Staticfile and then pushed the dist folder.

[Carsten]

stackoverflow.com/questions/39612339/…

[Rahul Singh]

i have a workaround for this problem if you donot want to go via the nginx config way but mind it is a strict work around link check the question 15 [last one]

[Melchia]

How to config nginx for pivotal.io. I don't have a server side all I did was in Front end side.

[Melchia]

I already told you Sir that all I did was creating an Angular application. I have done no work in the back end

[Rahul Singh]

this is a work around for the frontend only , please check the link in the comment sir . you need to make that change in your index.html. I will update in the answer too

[Rahul Singh]

@Melchia hope you get it now

[Melchia]

I don't understand, I visited your website nothing is there

[Melchia]

I went here rahulrsingh09.github.io/AngularConcepts/home#collapse15

[Rahul Singh]

@Melchia that is solution i was talking about it works on ghpages as well as for this scenarios. I hope

[Melchia]

No the problem you'talking about is different. I don't have this error when I refresh my page , I get this error only when I manually enter the URL

[Melchia]

Yes you're right. This method works too. But in my case I was using PWS which is a PaaS, so it couldn't work. +1 though for it could help people in the future

[carte blanche]

I am running into exact same issue but this didn't work me, any idea what could I be missing?am on angular8

[fix]

After everything was failing for me, I saw your answer way down here and realized I had to restart nginx

[John]

Hi I'm really confused on how to actually get to /etc/nginx/sites-available/yoursite for my react app. Please help.

[Sven Dhaens]

@John, this path is where nginx configuration would be found if you are on Unix-based OS, and ofc are using nginx., is this the case for you?

[John]

I'm on a windows machine @Sven. How do I get to the location? Any ideas?

[Sven Dhaens]

@John read up on nginx.org/en/docs/windows.html

[Paulo Guimarães]

this exactly what @Marko Letic said. What is the difference in this answer?

[Chgad]

You saved me with the / at the beginning of /index.html

[Bryan Lim]

If anyone is trying this solution and did not work. Check your nginx.conf if you did not miss adding root /dist of your index.html file. This is what happens to me forgot to add root /pathofmydist