web-dev-qa-db-fra.com

Comment déployer l'application angular-cli sur iis

J'ai simple application angular2-cli (une page avec la forme pilotée par le modèle - pas de routeur impliqué). Avec "ng servir" tout fonctionne bien. J'ai fabriqué la version de production avec ng build --product. J'ai copié tout le contenu du dossier ./dist dans un nouveau dossier sous C:\inetpub\wwwroot. J'ai créé une application virtuelle à partir de la console de gestion IIS. Le fichier de l'application Defualt est index.html. Je navigue sur l'application uri et je n'ai qu'une page avec "Chargement en cours ...". J'essaie de construire sans --product switch (seulement ng build) mais le résultat est le même. L'application angulaire ne se charge pas. Y at-il autre chose nécessaire pour publier l'application angulaire sur IIS?

angulariispublishangular-cli
21
PaulStanek

Voici comment je résous cette situation.

  • Créer un projet avec angular-cli
  • Construisez votre application avec ng build
  • Ouvrir IIS, créer un nouveau répertoire virtuel et afficher le dossier dist
  • Définissez base href dans votre index.html de / à /yourAliasNameOnIIS

  • Utilisez ce fichier web.config pour rediriger les demandes vers votre page index.html

    <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" />
        <add input="{REQUEST_URI}" pattern="^/(api)" negate="true" />
      </conditions>
      <action type="Rewrite" url="/yourAliasNameOnIIS" />
    </rule>
  </rules>
</rewrite>

  • Convertissez votre répertoire virtuel en une application Web

Vous pouvez également utiliser ng build --deploy-url "/yourAliasNameOnIIS" pour modifier le chemin src dans dist/index.html.

J'espère que ça aide!

28
ulubeyn

Lorsque vous ouvrez les outils de développement de votre navigateur, vous auriez vu 404 messages lorsque l'application tentait de télécharger les fichiers js, css, etc.

Vous devez définir la base href dans index.html sur

<base href="./"> 

cela garantira que la référence de base est relative à l'emplacement de votre site Web dans IIS . Vous devez également utiliser une stratégie d'emplacement de hachage, sinon, IIS interceptera les modifications de l'URL de votre routeur ng2 et tentera de trouver un contrôleur/une action pour l'URL.

sous les importations de votre app.module.ts:

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

J'ai effectué ces 2 étapes et tout fonctionne parfaitement sur Azure VM avec IIS. Cela signifie également que vous n'avez pas besoin de placer votre SPA sur la racine et que vous pouvez avoir plusieurs SPA qui fonctionnent joyeusement l'un à côté de l'autre (sur différents sites Web sur IIS).

12
Jan Feyen

Pour moi, c'était très simple:

  1. Exécutez la commande ng build. Cela va générer le dossier dist.
  2. Créez href = "" dans le fichier index.html.
  3. Donnez le chemin du dossier dist à l'application IIS et cela fonctionnera.

Cela simplifie encore les choses, vous n'avez pas besoin de modifier le fichier index.html:

ng build -prod --base-href
3
Dileep

J'ai essayé l'approche ci-dessous cela a fonctionné.

  1. Créer un nouveau site Web dans IIS (via inetmgr)
  2. use "ng build --prod" - génération du code de version de production
  3. Copiez les fichiers du dossier dist, puis collez-le dans le dossier racine du site Web IIS (ne copiez pas le dossier et placez-le dans le dossier racine du site Web IIS, ce qui poserait problème.
  4. Définissez les informations d'identification, l'autorisation et etc ... à partir de votre fin.
  5. Définissez l'autorisation d'accès du dossier racine pour "MACHINE_NAME\IIS_IUSRS & MACHINE_NAME\NETWORK SERVICE".
  6. Définissez la page par défaut comme "index.html" dans IIS
  7. Maintenant, vous pouvez naviguer sur le site.
2
Srini

J'ai renvoyé de nombreuses suggestions, ce qui a fonctionné pour moi était ce link

Une bonne explication pour expliquer pourquoi les choses doivent être configurées de manière différente pour une application Angular est clairement décrite ici. Suivez les étapes du lien, puis j’ai ajouté un fichier web.config dans l’emplacement du dossier des fichiers publiés avec les paramètres ci-dessous: 

<?xml version="1.0"?>
<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" />
            <add input="{REQUEST_URI}" pattern="^/(api)" negate="true" />
          </conditions>
          <action type="Rewrite" url="/" />
        </rule>
      </rules>
  </rewrite>
 </system.webServer>
</configuration>

Les paramètres sont également décrits dans le lien ci-dessus . J'espère que cela aidera quelqu'un.

2
Zaker

pour ceux qui utilisent angular i18n, vous devez créer l'application pour chaque langue et les mettre dans des dossiers distincts

ng build --output-path=dist/fr --prod --bh /fr/
ng build --output-path=dist/en --prod --bh /en/

et voici la config pour iis

<?xml version="1.0" encoding="UTF-8"?>
 <configuration>
  <system.webServer>
    <directoryBrowse enabled="true" />
    <rewrite>
        <rules>
            <rule name="Imported Rule 1" stopProcessing="true">
                <match url="^../index\.html$" ignoreCase="false" />
                <action type="None" />
            </rule>
            <rule name="Imported Rule 2" stopProcessing="true">
                <match url="(..)" ignoreCase="false" />
                <conditions logicalGrouping="MatchAll">
                    <add input="{REQUEST_FILENAME}" matchType="IsFile" ignoreCase="false" negate="true" />
                    <add input="{REQUEST_FILENAME}" matchType="IsDirectory" ignoreCase="false" negate="true" />
                </conditions>
                <action type="Rewrite" url="{R:1}/index.html" />
            </rule>
            <rule name="Imported Rule 3">
                <match url="^$" ignoreCase="false" />
                <conditions logicalGrouping="MatchAll">
                    <add input="{HTTP_ACCEPT_LANGUAGE}" pattern="^fr" />
                </conditions>
                <action type="Redirect" url="/fr/" redirectType="Found" />
            </rule>
            <rule name="Imported Rule 5">
                <match url="^$" ignoreCase="false" />
                <conditions logicalGrouping="MatchAll">
                    <add input="{HTTP_ACCEPT_LANGUAGE}" pattern="^es" negate="true" />
                </conditions>
                <action type="Redirect" url="/en/" redirectType="Found" />
            </rule>
        </rules>
    </rewrite>
 </system.webServer>
 </configuration>
1
Fateh Mohamed

En plus de la réponse d'ulubeyn qui fonctionnait principalement pour moi, j'ai ajouté mes propres règles de réécriture IIS pour permettre:

1) la redirection initiale de/dist vers alias 2) Javascript télécharge à partir d'alias et 3) Routage angulaire sur l'alias

<rules>
  <rule name="Redirect from blank URL to IIS Alias" stopProcessing="true">
    <match url="^/?$" />
    <action type="Rewrite" url="/MyDist" />
  </rule>
  <rule name="Redirect from /dist folder to IIS Alias" stopProcessing="true">
    <match url="^(.*)/dist" />
    <action type="Rewrite" url="/yourAliasNameOnIIS" />
  </rule>
  <rule name="Allow Angular URL Routing on IIS Alias" stopProcessing="true">
    <match url="^yourAliasNameOnIIS/*" />
    <conditions logicalGrouping="MatchAll">
      <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
      <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
      <add input="{REQUEST_URI}" pattern="^/(api)" negate="true" />
    </conditions>
    <action type="Rewrite" url="/yourAliasNameOnIIS" />
  </rule>
  <rule name="Redirect to IIS Alias folder with parameters" stopProcessing="true">
    <match url="(.*)" />
    <conditions logicalGrouping="MatchAll">
      <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
      <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
      <add input="{REQUEST_URI}" pattern="^/(api)" negate="true" />
    </conditions>
    <action type="Rewrite" url="/yourAliasNameOnIIS/{R:1}" appendQueryString="true" />
  </rule>
</rules>
1
samneric

ajoutez le fichier web.config à l'emplacement app/src / contenu de web.config:

<?xml version="1.0" encoding="utf-8"?>
<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>

dans .angular-cli.json, ajoutez Web.config à la section Actifs comme suit:

"assets": [
    "assets",
    "favicon.ico",
    "web.config"
],
0
vivek_waghmare

Vous pouvez le déployer sans aucun fichier Web.config comme ci-dessous,

Vous pouvez trouver index.html dans le dossier dist à l'intérieur de celui-ci trouver la balise base href

maintenant changer son chemin en conséquence

Ex -: si déployé dans wwwroot 

<base href="/">

Ex: si vous déployez dans un dossier dans wwwroot 

<base href="/FolderName/">
0
PrathapG