CODEWITHSUNDEEP
angularnginxsingle-page-applicationangular-routingcloud-foundry
Melchia
Melchia

Reputation: 24234

Deploy single page application Angular: 404 Not Found nginx

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');
  }
}

Upvotes: 52

Views: 78191

Answers (9)

Saad Abbasi
Saad Abbasi

Reputation: 853

if you are deploying your angular app to S3 you need to set up your Error Document and index Document to index.html and empty redirection rules (/properties/static website) S3 Angular deployment setting under path s3/properties/static website

Upvotes: 0

rajkanani
rajkanani

Reputation: 384

I assume your all data of /dist directory is now in /var/www/your-domain/, if not then first paste on that

now your url is only accepted homepage or landing page otherwise they show 404 error.

In this condition find your ngnix's /default file, In Linux path like that /etc/nginx/sites-available/default, In this file, you will see like that

try_files $uri $uri/ =404

replace with

try_files $uri $uri/ /index.html;

now you restart your ngnix server with command in linux

sudo systemctl restart nginx

and see status of ngnix with

sudo systemctl status nginx

Upvotes: 9

Ayush Agrawal
Ayush Agrawal

Reputation: 1

This is actually an nginx configuration issue following this required to overcome this issue.

In your nginx.conf file try using:

try_files $uri $uri/ /index.html;

instead of:

try_files $uri $uri/ =404;

Then afterward also to need change the following.

from:

 error_page 404 index.html;

To

error_page 404 /actualPathToDistFolder/index.html;

Upvotes: 0

Melchia
Melchia

Reputation: 24234

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.

Upvotes: 15

Fateh Mohamed
Fateh Mohamed

Reputation: 21377

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!

Upvotes: 2

Mad Javad
Mad Javad

Reputation: 534

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.

Upvotes: 44

Sven Dhaens
Sven Dhaens

Reputation: 1996

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;
    }

Upvotes: 98

Rahul Singh
Rahul Singh

Reputation: 19622

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

Upvotes: 3

Carsten
Carsten

Reputation: 4208

Angular applications are single page applications. When you type the address manually you try to route to a location where the application is not running.

You need to edit nginx config to route to your base page.

Upvotes: 1

Related Questions