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

Question

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

Answer 1

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

1. Создать новый веб-сайт в IIS (через INETMGR)
2. использования «нг построить --prod» - создания серийной версии кода
3. копировать файлы в DIST папки затем вставьте его в корневой папке веб-сайта IIS (Дон Скопируйте папку и поместите ее в корневую папку веб-сайта IIS, которая вызовет проблему)
4. Задайте учетные данные, авторизацию и т. д. с вашего конца.
5. Установите разрешение доступа к корневой папке для «ИМЯ_КОМПЬЮТЕР \ IIS_IUSRS & ИМЯ_КОМПЬЮТЕР \ NETWORK SERVICE»
6. Установить страницу по умолчанию как «index.html» в IIS
7. Теперь вы можете просматривать веб-сайт.

Answer 2

При открытии средства разработки вашего браузера, вы бы видели 404 сообщения, когда приложение пытается DONWLOAD в JS, CSS и т.д. файлы

Вам необходимо установить базовый HREF в index.html в

<base href="./">

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

под импортом вашего app.module.ts:

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

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

Answer 3

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

• Создание проекта с углового кли
• Построить приложение с ng build
• Open IIS, создайте новый виртуальный каталог и показать dist папку
• Set base href в вашем index.html из / в /yourAliasNameOnIIS

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

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

Answer 4

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

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

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

ng build -prod --base-href 

Answer 5

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

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

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