Получить маршрутизацию Angular2, работающую на IIS 7.5

Я изучал Angular2. Маршрутизация отлично работает при работе на узле lite-server. Я могу перейти на главную (localhost: 3000) страницу и перейти через приложение. Я также могу набрать localhost: 3000/employee, и он перейдет на запрошенную страницу.

В конечном итоге приложение будет работать на сервере Windows IIS 7.5. Маршрутизация работает нормально, если я начинаю на главной странице (localhost: 2500), я могу перемещаться через приложение без каких-либо проблем. Там, где я сталкиваюсь с проблемой, вы пытаетесь перейти непосредственно на другую страницу, а затем на главную целевую страницу (localhost: 2500/employee). Я получаю сообщение об ошибке HTTP 404.0.

Вот мой файл app.component, который обрабатывает маршрутизацию.

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

Я хотел бы сказать, что я понимаю проблему. IIS ищет директиву/сотрудника, но этого не существует. Я просто не знаю, как сообщить IIS о маршрутизации.

Ответы

Ответ 1

(для angular 2, angular 4)

Создайте файл web.config, как в указанной статье.

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

Поместите его в корневой каталог (такой же, как index.html) вашего сайта. Моя находится в папке dist (angular -cli project).

После развертывания перейдите в IIS, если у вас есть доступ, и вы можете щелкнуть по значку правила перезаписи и увидеть, что он читает эту конфигурацию. Если вы не видите и не указываете правила перезаписи, вам необходимо включить модуль под значком "modules". Этот фрагмент кода не был написан, но я хотел бы поделиться более подробными сведениями о реализации.

Ответ 2

Для этого вам следует использовать модуль перезаписи URL. Очень подробная информация о том, как его использовать, предоставляется здесь

И пример фрагмента web.config, который работал у меня в IIS 8, здесь.

Ответ 3

Использование модуля перезаписи URL будет убивать путь маршрутизации внутри приложения. Я изменил страницу Error для ответа 404 Not Found на мой файл index.html. Это не изменит URL в браузере, но сервер вернет все приложение.

HowTo: Site- > Application- > Страницы ошибок из контекстного меню в коде состояния 404 выберите "Редактировать..." и выберите вариант "Выполнить URL" на этом сайте. Введите /index.html и нажмите OK. Обратите внимание, что путь от корневого сайта, поэтому вам может потребоваться указать путь к вашему приложению.

Ответ 4

Мое приложение angular 6 запущено в подпапке, и у меня были проблемы с подходом для перенаправления в подпапку. Вместо этого я перенаправляю прямо на index.html

Шаг 1.) Создайте угловое приложение с флагом --base-href следующим образом: ng build --prod --base-href /ng/

Шаг 2.) Создайте файл web.config в этой папке с перенаправлением на index.html следующим образом:

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

Ответ 5

Если вы используете проект Core 2.1, вы можете пропустить правила перезаписи web.config и выполнить глубокое связывание Angular, поместив этот код в нижней части Startup.cs.

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

Источник

Ответ 6

Если у вас есть URL, отличный от корня приложения, вы можете попробовать это:

 <rule name="AngularJS Routes" stopProcessing="true">
      <match url="(.*)mypath/myangularapp/dashboard(.*)" />
      <conditions logicalGrouping="MatchAll">
        <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
        <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
      </conditions>
      <action type="Rewrite" url="/mypath/myangularapp/dashboard/index.html" />
    </rule>

Убедитесь, что вы создали приложение Angular с помощью следующей команды:

ng build --base-href=/mypath/myangularapp/dashboard/