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:
- cf push name-app --no-start
- 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');
}
}
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.
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.
HashLocationStrategy
in AngularI finally found the answer: After I generated the dist folder.
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.
In your
nginx.conf
file try using:instead of:
That worked for me on Angular 5 project.
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
but what we acctually want is...
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
so i gave permissions to nginx user on the top folder containing my dist
and then you have to restart nginx
and it should work!