Ottenere il routing Angular2 su IIS 7.5

Question

Ho imparato Angular2. L'instradamento funziona bene quando si esegue il server ljs del nodo. Posso andare alla pagina principale (localhost: 3000) e spostarmi attraverso l'applicazione. Posso anche digitare localhost: 3000/employee e andrà alla pagina richiesta.

L'app risulterà in un server Windows IIS 7.5. Il routing funziona bene se inizio alla pagina principale (localhost: 2500), sono in grado di spostarmi attraverso l'applicazione senza alcun problema. Dove mi imbatto in un problema è quando provo ad andare direttamente a una pagina diversa dalla pagina di destinazione principale (localhost: 2500/dipendente). Ottengo un errore HTTP 404.0.

Ecco il mio file app.component che gestisce il routing.

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

Mi piacerebbe dire che capisco il problema. IIS sta cercando una direcotry di/employee ma non esiste. Semplicemente non so come rendere IIS consapevole del routing.

Answer 1

Si dovrebbe usare URL rewrite module per raggiungere questo obiettivo. Un'informazione molto dettagliata su come usarlo è fornita here

E un campione di snippet web.config che ha funzionato per me su IIS 8 è here.

Answer 2

L'utilizzo del modulo di riscrittura URL consente di eliminare il percorso di routing all'interno dell'applicazione. Ho cambiato la pagina di errore per la risposta 404 non trovata al mio file index.html. Questo non cambierà l'URL nel browser, ma il server restituisce l'intera applicazione.

HowTo: Sito-> Applicazione-> Pagine di errore dal menu di scelta rapida su Codice di stato 404 selezionare Modifica ... e scegliere l'opzione Esegui URL su questo sito. Immettere /index.html e premere OK. Nota che il percorso è dalla radice del sito, quindi potresti dover includere il percorso dell'app.

Answer 3

(Per angolare 2, angolare 4)

Creare un file web.config come nel citato articolo.

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

Inserirlo nella directory principale (come index.html) del sito. Il mio è nella cartella dist (progetto angular-cli).

Dopo la distribuzione, andare su IIS se si dispone dell'accesso e si può fare clic sull'icona delle regole di riscrittura e vedere che legge questa configurazione. Se non vedi e icona per riscrivere le regole, dovrai abilitare il modulo sotto l'icona "moduli". Questo frammento di codice non è stato scritto da be ma volevo condividere i migliori dettagli di implementazione.