web-dev-qa-db-fra.com

404 Not Found routage angulaire nginx

J'ai une application Angular. J'exécute la commande ng build --prod --aot pour générer le dossier dist . Dans le dossier dist, j'ai créé un fichier nommé Staticfile puis j'ai téléchargé le dossier dist dans pivotal.io à l'aide des commandes suivantes. :

  1. cf Push nom-app --no-start 
  2. cf start nom-app

L'application fonctionne bien. J'ai une barre de navigation, donc quand je change de chemin avec navbar, tout fonctionne bien. Mais quand je le fais manuellement (j'entre l'URL moi-même), j'ai cette erreur 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');
  }
}
angularnginxcloudfoundryangular-routingpivotal-cloud-foundry
5
Melchia

J'ai finalement trouvé la réponse: Après avoir généré le dossier dist . 

  • J'ai créé un fichier appelé Staticfile
  • J'ai ouvert Staticfile & J'ai ajouté cette ligne pushstate: enabled 

pushstate enabled maintient les URL visibles du navigateur propres pour les applications JavaScript côté client qui desservent plusieurs itinéraires. Par exemple, le routage pushstate autorise un itinéraire de fichier JavaScript unique vers plusieurs URL marquées par une ancre et qui ressemblent à/some/path1 au lieu de/some # path1.

4
Melchia

pour ceux qui n'utilisent pas Staticfile, vous pouvez essayer ceci.

J'ai eu le même problème avec nginx servant angular . Ce qui suit est le fichier de configuration par défaut, probablement trouvé quelque part dans/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;
    }

mais ce que nous voulons réellement, c’est ...

     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;
    }
11
Sven Dhaens

Dans votre fichier nginx.conf, essayez d’utiliser:

try_files $uri $uri/ /index.html;

au lieu de:

try_files $uri $uri/ =404;

Cela a fonctionné pour moi sur le projet Angular 5.

5
Mad Javad

Ceci est un problème avec le côté serveur et non le côté Angular. Il incombe aux serveurs de renvoyer l'index ou la page de destination pour chaque demande de votre cas nginx.

METTRE &AGRAVE; JOUR

Si vous n'avez absolument pas de serveur ou de serveur sur lequel vous pouvez le configurer, il existe deux solutions de contournement.

  • Utilisation de HashLocationStrategy en angulaire
  • Faire du tweak dans le fichier index.html link No -15 
2
Rahul Singh

Les applications angulaires sont des applications à une seule page. Lorsque vous tapez l'adresse manuellement, vous essayez de vous rendre à un emplacement où l'application n'est pas en cours d'exécution.

Vous devez modifier nginx config pour l’acheminer vers votre page de base.

1
Carsten