web-dev-qa-db-fra.com

Erreur 404 introuvable sur nginx Angular: routage 8.0.2

Je rencontre un problème où, lorsque j'essaie d'accéder à mywebsiteurl/radar-input Ou mywebsiteurl/daily-submissions, J'obtiens une erreur 404 Not Found, Je peux confirmer que les composants correspondants se chargent correctement lorsque je ne le fais pas ' t utiliser la méthode de routage, voici mon app-routing.module.ts

Je génère des fichiers statiques à l'aide de la commande suivante et crée un fichier .nginx Vide et héberge ces fichiers statiques sur le serveur nginx

ng build --prod --outputPath=/<current working directory>/www

Quelqu'un peut-il fournir des conseils sur la façon de déboguer cela et de le corriger?

app-routing.module.ts 

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { RadarInputComponent } from "./radar-input/radar-input.component";
import { LatestSubmittedProjectPageComponent } from './latest-submitted-project-page/latest-submitted-project-page.component';

const appRoutes: Routes = [
  { path: 'radar-input', component: RadarInputComponent },
  { path: 'daily-submissions', component: LatestSubmittedProjectPageComponent },
  {
    path: 'radar-input',
    component: RadarInputComponent,
    data: { title: 'Radar List' }
  },
  { path: '',
    redirectTo: '/radar-input',
    pathMatch: 'full'
  },
  { path: '**', component: RadarInputComponent }
];

@NgModule({
  imports: [RouterModule.forRoot(
    appRoutes,
    { enableTracing: true } // <-- debugging purposes only
  )],
  exports: [RouterModule]
})
export class AppRoutingModule { }

MISE À JOUR1:

J'ai regardé 404 Not Found nginx angular et créé un Staticfile & j'ai ajouté cette ligne pushstate: enabled Faisait toujours NOT travaille pour moi

MISE À JOUR2:

J'ai essayé de créer un fichier nginx.conf comme ci-dessous mais j'obtiens toujours l'erreur

server {
    root /www;

    location / {
    }

    location /daily-submissions/ {
        index index.html
    }
}

contenu du dossier www:

drwxr-xr-x  23 username  staff     736 Aug 19 13:59 ..
-rw-r--r--   1 username  staff    1440 Aug 19 13:59 runtime-es5.741402d1d47331ce975c.js
-rw-r--r--   1 username  staff  770212 Aug 19 13:59 main-es5.ded1413a886662a5ad02.js
-rw-r--r--   1 username  staff  113549 Aug 19 13:59 polyfills-es5.405730e5ac8f727bd7d7.js
-rw-r--r--   1 username  staff   14707 Aug 19 14:00 3rdpartylicenses.txt
-rw-r--r--   1 username  staff   28136 Aug 19 14:00 overlay.2663ca4a577f280aa709.png
-rw-r--r--   1 username  staff   50408 Aug 19 14:00 banner.6f97727962128487d41a.jpg
-rw-r--r--   1 username  staff    1440 Aug 19 14:00 runtime-es2015.858f8dd898b75fe86926.js
-rw-r--r--   1 username  staff  683152 Aug 19 14:00 main-es2015.81b9cbd6a9d33d23040d.js
-rw-r--r--   1 username  staff   37304 Aug 19 14:00 polyfills-es2015.5728f680576ca47e99fe.js
-rw-r--r--   1 username  staff  105076 Aug 19 14:00 styles.64346455fc558cf71e6a.css
-rw-r--r--   1 username  staff    5430 Aug 19 14:00 favicon.ico
drwxr-xr-x  14 username  staff     448 Aug 19 14:00 .
-rw-r--r--   1 username  staff    1050 Aug 19 14:00 index.html
angularnginxangular-ui-routerangular-routing
8
user2125827

J'espère que vous savez exactement quel est le problème. Ce problème se produit dans SPA (Single Page Applications). L'URL que vous saisissez recherche le répertoire/fichier de page. Si vous allez à disons mywebsiteurl/radar-input il recherchera le fichier radar-input. Dans les SPA, il n'y a qu'un seul fichier et c'est index.html pour qu'il ne trouve pas le radar-input fichier et lancer un 404.

Les SPA ont toute leur logique, le routage dans le fichier index.html et une fois qu'il est servi, il gère tout pour vous (pas le cas pour les non-spas), donc si vous allez dans mywebsiteurl/ cela fonctionnera très bien et toutes les URL seront chargées via le routage de l'application, car mywebsiteurl/ recherchera index.html fichier et le trouver et servir cela. Donc, si votre site Web fonctionne bien en visitant l'URL de base, cela signifie que vos fichiers statiques sont dans le bon répertoire, il vous suffit de l'ajouter à vous nginx.conf

location / {
try_files  $uri /index.html;        #check if uri exists else serve index.html as rewrite
}

qui essaie essentiellement de trouver d'abord le fichier dans l'URL, s'il n'existe pas, il servira le fichier index.html.

2
Omair Nabiel

Vous pouvez essayer d'activer le hashtag dans le angular. Cela vient en aide lorsqu'un serveur Web est mal configuré, donc le routage se fera côté client. Au moins vous saurez où chercher le problème pour.

RouterModule.forRoot(routes, {useHash: true})

SI le routage est toujours incorrect avec les hashtags, cela signifie que le problème est dans la configuration du routeur, si cela fonctionne, que la configuration nginx est mauvaise.

1
Zsolt Tolvaly

Je pense qu'il y a un problème avec votre configuration nginx, veuillez vérifier le error.log (devrait être /var/log/nginx).

Et puisque vous n'utilisez pas de hachage (#) dans l'itinéraire client, veuillez utiliser try_file dans la configuration nginx.

Voici ma configuration nginx en tant que flux, qui fonctionne parfaitement avec les applications angular.

location /myapp/ {
    alias /myapp/;
    index index.html index.htm;
    add_header Cache-Control no-cache;
    gzip_static on;
    try_files $uri /myapp/index.html;
}
0
zhimin

J'ai essayé tous vos exemples et dans Angular8 celui de nginx.conf ne fonctionne pas, je publie ici la solution implémentée après avoir lu la documentation de nginx.

Conteneur pour Azure avec SSH activé avec Linux Alpine - taille finale 37 Mo!

#Stage 1
FROM node:12-Alpine as node
WORKDIR /app
COPY angular-app .
RUN npm install
RUN npm run build --prod

#Stage 2
FROM nginx:Alpine
LABEL maintainer="Angular for Azure App Services Container <[email protected]>"

RUN apk add openssh openrc supervisor nginx-mod-http-headers-more\
     && echo "root:Docker!" | chpasswd 
COPY scripts/sshd_config /etc/ssh
COPY scripts/default.conf /etc/nginx/conf.d/
COPY scripts/supervisord.conf /etc/
RUN ssh-keygen -A
COPY --from=node /app/dist/angular-app /usr/share/nginx/html
EXPOSE 80 443 2222
CMD ["/usr/bin/supervisord"]

configuration Nginx --default.conf

server {
    listen       80;
    server_name  localhost;

    location / {
        root   /usr/share/nginx/html;
        index  index.html index.htm;
    }

   error_page  404              /index.html;
    server_tokens off;
    # redirect server error pages to the static page /50x.html
    #
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   /usr/share/nginx/html;
    }
    header Strict-Transport-Security "max-age=15768000" always;
}

Sincères amitiés

0
Jose Luis Mantilla G.

Vous pouvez essayer de remplacer le bloc location dans votre configuration Nginx par le code ci-dessous:

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

Vous pouvez supprimer tout autre bloc d'emplacement que vous avez configuré. L'ajout de celui-ci devrait le faire. Il redirige toutes les demandes vers index.html

0
koushikmln