Подтвердить что ты не робот

Как и что использовать Angular2 для IIS

Возьмем, например, angular2 -quickstart. Какие файлы необходимо развернуть и какие параметры необходимо установить для запуска этого веб-приложения из IIS?

Это учебник Typescript, который я решил скомпилировать для JavaScript.

4b9b3361

ОТВЕТЫ

Ответ 1

Настройка Angular 2 для меня была довольно проблемой, потому что маршруты HTML5 (без хеш-бэнга) не работали.

Чтобы получить проект Angular2, работающий в среде IIS без обслуживания, используя Angular-CLI (вам все равно нужно его построить!):

  • После того, как вы закончите разработку проекта, вам нужно будет скомпилировать его (или скомпилировать) в другую среду. Если вам нужно установить это значение, прочитайте this.

Самая короткая команда сборки, в которой вы нуждаетесь:

ng b

  1. В вашей папке сборки (если вы не добавили внешнюю/другую папку, это будет папка dist) в вашем проекте), скопируйте содержимое на ваш сервер IIS.

  2. Убедитесь, что для папки IIS-сервера требуются разрешения для группы IIS_IUSRS и пользователя IUSR для доступа к ней. (Щелкните правой кнопкой мыши по папке → Свойства → Безопасность → Изменить → Добавить и введите их. Вы можете щелкнуть по кнопке "Проверить имя", чтобы убедиться, что это правильные буквы, которые вы вводите)

  3. Следующий вопрос, который вам нужно решить, - это получить файл web.config, чтобы поместить в свою папку сервера исправления проблем маршрутизации.

Если мы работали с Apache, нам понадобится .htaccess, , но для IIS, мы используем web.config. Найденный здесь работал у меня, если ваше приложение маршрутизируется из корневого каталога вашего сервера. (Примечание: как было напомнено @Demortes, для этого потребуется дополнительный модуль, который будет добавлен в среду IIS под названием URLRewrite)

Этот файл (web.config) находится в корневом каталоге вашего сервера.

Надеюсь, что это поможет любому, у кого были подобные проблемы для меня:)

Приветствия.

Ответ 2

Сам webapp не нуждается в анализе сервера, так как это только статические файлы - веб-ресурсы (*.js, *.html файлы и т.д.). Статические файлы - это то, что angular2-quickstart генерирует как результат своего процесса сборки, который вы запускаете в своей среде разработки (возможно, локально на вашем персональном компьютере). Для среды dev потребуется node (+ npm). И infact, вы можете протестировать это руководство в локальной локальной среде без необходимости использования внешнего сервера.

изменить: Если вы посмотрите в package.json, вы увидите, что у него есть Lite-сервер:

  "scripts": {
    "start": "npm run lite",
    "lite": "lite-server"
  },

Lite server - небольшой сервер, который имитирует простой (сетевой) файловый сервер.

Только легкий сервер node, обслуживающий веб-приложение, открывается он в браузере, обновляется при изменении html или javascript, вводит CSS изменяется с использованием сокетов и имеет резервную страницу, когда маршрут не найдено.

Чтобы дать вам ответ, чтобы обслуживать ваше приложение с помощью IIS, вам нужно только http://docs.asp.net/en/latest/fundamentals/static-files.html

Ответ 3

  • Загрузите и установите плагин IIS rewrite https://www.iis.net/downloads/microsoft/url-rewrite

  • Создайте приложение по умолчанию.

    • Создайте папку в каталоге c:\inetpub\wwwroot для размещения приложения
    • После шага 8 скопируйте содержимое папки dist в папку c:\inetpu\wwwroot\

  • Перед сборкой в ​​index.html измените базу href= "/" на базу href= "//"

    • Чтобы пропустить шаги 1,2 и 3 для каждой новой сборки, проверьте шаг 9 как альтернативу шагу 8

  • Структура веб-конфигурации.

    <configuration>
    <system.webServer>
        <rewrite>
        <rules>
            <rule name="Main Rule" >
                    <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="/<appname subfolder>/" />
                </rule>
            </rules>
        </rewrite>
    </system.webServer>
</configuration>
    • Примечание. Создайте файл Web.config в папке src и добавьте ссылку на него в разделе angular -cli.json в разделе ресурсов, чтобы он копировался во время каждой сборки. -
    • В противном случае вы будете вручную создавать этот файл каждый раз при использовании ng build.

  • не применимо

  • В angular -cli.json введите web.config в блок активов

            "assets": [
            "assets",
            "favicon.ico",
            "Web.config"
        ],

  • В angular -cli.josn добавьте пример для примера css, чтобы он был упакован в стили..bundle.cs

        "styles": [
        "../node_modules/font-awesome/css/font-awesome.min.css",
        "../node_modules/bootstrap/dist/css/bootstrap.min.css",
        "assets/site.css",
        "assets/page.css",
        "assets/menu.css",
        "styles.css",
        "../node_modules/primeng/resources/primeng.min.css",
        "../node_modules/primeng/resources/themes/omega/theme.css"        
    ],

    Если у вас есть настраиваемые сценарии, поместите этот путь в пример в разделе сценариев

        "scripts": [
            "../node_modules/jquery/dist/jquery.js",        
            "index.js" 
            ],

  • ng build --prod

    • Примечание: ng build --prod запускает AOT (компиляция по времени) по умолчанию в последней версии angular -cli
    • Примечание: команда ng build удаляет папку dist и воссоздает эту папку каждый раз, когда вы создаете команду

  • Альтернативная команда сборки:

    ng build --prod --output-path 'C:\inetpub\wwwroot\<appname subfolder>' --base-href /<appname subfolder>'/
    • a- если вы не хотите вручную обновлять base-href в index.html

    • b- если вы не хотите копировать папку dist и папку wwwroot приложения.

    • Примечание1: Следующая команда будет работать, только если вы откроете визуальный код (или любое приложение терминала) с административными привилегиями. В противном случае команда mkdir для создания выходной папки в wwwroot не удастся.

    • Примечание2: Вам все равно нужно обновить Web.config. См. Шаг 4
    • Примечание3: Оформление косой черты/при запуске и окончании --base-href/'/

  • Проверьте прямую цитату из одной публикации. Не уверен, что изменение прав безопасности группы IIS_IUSRS и пользователя IUSR для... wwwroot \ как описано в одном из веб-ссылок. Может быть, это не требуется, но я подчеркиваю это здесь, чтобы вы помнили.

Прямая цитата из другого использования: "Убедитесь, что папка вашего сервера IIS имеет необходимые разрешения для группы IIS_IUSRS и пользователя IUSR для доступа к ней. (Щелкните правой кнопкой мыши по папке → Свойства → Безопасность → Изменить → Добавить, и введите их. Вы можете нажать кнопку" Проверить имя", чтобы убедиться, что вы правильно набираете текст)

Ссылки: - Как и как развернуть Angular2 в IIS - https://www.youtube.com/watch?v=K0XORWxG11k

Ответ 4

Я создал небольшой проект github, который имеет Angular2 текущий на сегодняшний день (10/13/2016), который работает в IIS 7.5 с маршрутизацией и под номером ng. Он использует стратегию URL на основе хэша. Он использует angular -cli, у меня есть информация о том, как настроить службу IIS или ng.

https://github.com/howserss/Angular2-IIS-sample-app

Ответ 5

Angular 2 маршрутизация (с хешем) будет работать без каких-либо проблем в IIS. Просто создайте правило перезаписи URL по умолчанию, которое перенаправит все запросы в файл index.html вашего приложения angular. Правило будет перенаправлять все запросы на index.html за исключением необходимых файлов js и фактических URL-адресов приложения angular (то есть index.html или index.html #/{route-value}.

EX:

<rules>
  <rule name="Default">
    <match url="(.* ).js|index.html(.*)" negate="true" />
    <action type="Rewrite" url="/index.html" />
  </rule>
</rules>

Angular 2 маршрутизация (без хэша) не будет работать с IIS. В случае чистого HTML-приложения IIS будет маршрутизировать входящий запрос и перенаправляет запрос на страницу с ошибкой, если такая страница не существует в этом месте.

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

Ex Route для приложения MVC:

routes.MapRoute(
    name: "Angular",
            url: "{*url}",
           defaults: new { controller = "Home", action = "Index", id =     UrlParameter.Optional },
           constraints: new { url = new AppFeatureUrlConstraint() }


public class AppFeatureUrlConstraint : IRouteConstraint
    {
        public bool Match(HttpContextBase httpContext, Route route, string parameterName, RouteValueDictionary values, RouteDirection routeDirection)
        {
        if (values[parameterName] != null)
        {
            var url = values[parameterName].ToString();
            if (url.StartsWith("angular/", StringComparison.InvariantCultureIgnoreCase))
                return true;
            else
                return false;
        }
        return false;
        }
    }

Ответ 6

после того, как вы его создадите, скопируйте все файлы в папку fold fold, помещенную на ваш сервер IIS, он содержит только файлы html, css и js, поэтому просто разместите его как статический веб-сайт.

Он работает для любого веб-сервера независимо от Apache, IIS или nginx.