web-dev-qa-db-fra.com

Obtenir le routage Angular2 en cours IIS 7.5

J'ai appris Angular2. Le routage fonctionne parfaitement lors de l'exécution sur le serveur nodejs lite. Je peux aller à la page principale (localhost: 3000) et parcourir l’application. Je peux aussi taper localhost: 3000/employee et cela ira à la page demandée. 

L'application sera éventuellement installée sur un serveur Windows IIS 7.5. Le routage fonctionne bien si je commence par la page principale (localhost: 2500), je peux passer d’une application à l’autre sans aucun problème. Je rencontre un problème lorsque j'essaie d'accéder directement à une page autre que la page de destination principale (localhost: 2500/employee). Je reçois une erreur HTTP 404.0.

Voici mon fichier app.component qui gère le routage.

import { Component } from '@angular/core';
import { RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS } from '@angular/router-deprecated';
import { HTTP_PROVIDERS } from '@angular/http';

import { UserService } from './services/users/user.service';
import { LogonComponent } from './components/logon/logon.component';
import { EmployeeComponent } from './components/employee/employee.component';


@Component({
     selector : 'opi-app',
     templateUrl : 'app/app.component.html',
     directives: [ROUTER_DIRECTIVES],
     providers: [ROUTER_PROVIDERS, UserService, HTTP_PROVIDERS]
})

@RouteConfig([
     {
      path: '/',
      name: 'Logon',
      component: LogonComponent,
      useAsDefault: true 
     },
     {
      path: '/employee',
      name: 'Employee',
      component: EmployeeComponent
     }
])

export class AppComponent { }

Je voudrais dire que je comprends la question. IIS recherche un répertoire de/employee mais il n’existe pas. Je ne sais tout simplement pas comment informer IIS du routage. 

htmlangulariis-7.5
22
Per Larsen

(Pour angulaire 2, angulaire 4)

Créez un fichier web.config comme dans l'article mentionné.

<configuration>
  <system.webServer>
    <rewrite>
      <rules>
        <rule name="AngularJS Routes" stopProcessing="true">
          <match url=".*" />
          <conditions logicalGrouping="MatchAll">
            <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
            <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
          </conditions>
          <action type="Rewrite" url="/" />
        </rule>
      </rules>
    </rewrite>
  </system.webServer>
</configuration>

Placez-le dans le répertoire racine (identique à index.html) de votre site. Le mien est dans le dossier dist (projet angular-cli).

Après le déploiement, accédez à IIS si vous en avez l'accès et vous pouvez cliquer sur l'icône de réécriture des règles pour voir si elle lit cette configuration. Si vous ne voyez pas d'icône pour les règles de réécriture, vous devrez activer le module sous l'icône "modules". Cet extrait de code n'a pas été écrit par be, mais je souhaitais partager de meilleurs détails d'implémentation.

54
Judson Terrell

Vous devriez utiliser le module de réécriture d'URL pour y parvenir. Une information très détaillée sur son utilisation est fournie ici

Et un extrait de code web.config qui a fonctionné pour moi sur IIS 8 est ici .

8
Arpit Agarwal

L'utilisation du module de réécriture d'URL supprimera le chemin de routage dans l'application. J'ai modifié la page d'erreur pour la réponse 404 non trouvée à mon fichier index.html. Cela ne changera pas l'URL dans le navigateur, mais le serveur renverra toute l'application.

HowTo: Site-> Application-> Error Pages du menu contextuel sur le code d'état 404, choisissez Modifier ... et choisissez l'option Exécuter l'adresse URL sur ce site. Entrez /index.html et appuyez sur OK. Notez que le chemin provient de la racine du site. Vous devrez peut-être inclure votre chemin d'application.

1
Jan Zahradník

Mon application angular 6 est exécutée dans un sous-dossier et j'ai eu des problèmes avec l'appoach pour rediriger vers le sous-dossier. Au lieu de cela, je redirige directement vers index.html

Étape 1.) Construisez une application angulaire avec le drapeau --base-href comme ceci: ng build --prod --base-href /ng/

Étape 2.) Créez un fichier web.config dans ce dossier avec le lien redirigé vers le fichier index.html comme ceci:

<configuration>
  <system.webServer>
    <rewrite>
      <rules>
        <rule name="Angular Routes" stopProcessing="true">
          <match url=".*" />
          <conditions logicalGrouping="MatchAll">
            <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
            <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
          </conditions>
          <action type="Rewrite" url="./index.html" />
        </rule>
      </rules>
    </rewrite>
  </system.webServer>
</configuration>
1
t2t

Si vous utilisez un projet Core 2.1, vous pouvez ignorer les règles de réécriture de web.config et effectuer la liaison profonde angulaire en plaçant ce code au bas de votre Startup.cs.

   app.Use(async (context, next) =>
   {
       context.Response.ContentType = "text/html";
       await context.Response.SendFileAsync(Path.Combine(env.WebRootPath, "index.html"));
   });

La source

0
jaycer