Как развернуть приложение angular -cli на iis

У меня есть простое приложение angular2 -cli (одна страница с управляемой моделью - никакой маршрутизатор не задействован). С "ng serve" все работает нормально. Я сделал производственную версию с ng build --product. Я скопировал содержимое папки. /dist в новую папку под C:\inetpub\wwwroot. Я сделал виртуальное приложение из консоли управления IIS. Файл приложения Defualt - index.html. Я просматриваю приложение uri и получаю только страницу с "Загрузка...". Я пытаюсь построить без --product switch (только ng build), но результат тот же. Angular приложение не загружается. Нужно ли еще что-то еще публиковать приложение Angular в IIS?

Ответ 1

Вот как я решаю эту ситуацию;

Создать проект с помощью angular -cli
Создайте приложение с помощью ng build
Откройте IIS, создайте новый виртуальный каталог и покажите папку dist
Задайте base href в вашем index.html от / до /yourAliasNameOnIIS

Используйте этот файл web.config для перенаправления запросов на страницу 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>

Преобразование вашего виртуального каталога в веб-приложение

Вы также можете использовать ng build --deploy-url "/yourAliasNameOnIIS" для изменения пути src в dist/index.html.

Надеюсь, это поможет!

Ответ 2

Когда вы открываете инструменты dev вашего браузера, вы видели бы 404 сообщения, когда приложение пыталось загрузить файлы js, css и т.д.

Вам нужно установить base href в index.html на

<base href="./">

это будет гарантировать, что базовая ссылка будет относиться к тому, где ваш сайт живет в IIS. Вам также необходимо использовать стратегию размещения хэшей, иначе IIS перехватит изменения URL-адреса маршрутизатора ng2 и попытается найти контроллер/действие для URL-адреса.

под импортом вашего приложения .module.ts:

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

Я сделал эти 2 шага, и все отлично работает на Azure VM с IIS. Выполнение этого способа также означает, что вам не нужно размещать свой SPA в корне, и вы можете иметь несколько SPA, работающих счастливо рядом друг с другом (на разных сайтах в IIS).

Ответ 3

Я попробовал подход ниже, с которым он работал.

Создайте новый веб-сайт в IIS (через inetmgr)
использовать "ng build --prod" - генерировать код производственной версии
Скопируйте файлы папки dist и вставьте их в корневую папку веб-сайта IIS (не копируйте папку и не помещайте ее в корневую папку веб-сайта IIS, что может вызвать проблему).
Задайте учетные данные, авторизацию и т.д. с вашего конца.
Задайте разрешение доступа к корневой папке для "MACHINE_NAME\IIS_IUSRS и MACHINE_NAME\NETWORK SERVICE"
Задайте страницу по умолчанию как "index.html" в IIS
Теперь вы можете просматривать веб-сайт.

Ответ 4

Для меня это было очень просто:

Запустите команду сборки ng. Он будет генерировать папку dist.
Сделайте файл href="" в файле index.html.
Дайте путь папки dist к приложению IIS, и он будет работать.

Это делает его еще проще, вам не нужно изменять файл index.html:

ng build -prod --base-href

Ответ 5

В дополнение к ответу ulubeyn, который в основном работал у меня, я добавил свои собственные правила перезаписи IIS, чтобы включить:

1) начальное перенаправление от /dist до псевдонима 2) Загрузка Javascript из псевдонима и 3) Angular маршрутизация по псевдониму

<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>