Get Angular2 routing работает на IIS 7.5

Question

Я изучаю 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 о маршрутизации.

Answer 1

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

И образец фрагмента web.config, который работал на меня на IIS 8, - here.

Answer 2

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

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

Answer 3

(для угловых 2, угловой 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).

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