Come posso far funzionare il mio AngularJS SPA in ambiente di sviluppo Web VS 2015 correttamente aggiornato

Question

Ho un'applicazione AngularJS SPA che ho sviluppato utilizzando Visual Studio 2015. Quando faccio clic su Pubblica, pubblica index.html e funziona perfettamente. Tuttavia, se sono su una pagina e faccio clic su Aggiorna, prova a eseguire un aggiornamento della pagina SPA come example.com/home/about. Questo fallisce perché non ho una pagina home/about.

C'è un modo per modificare il mio file web.config (solo per il test locale) in modo che possa effettivamente andare all'indice index.html (caricarlo) e poi allo stato/home/about?

Ecco il mio web.config corrente:

<configuration> 
    <system.web> 
    <compilation debug="true" targetFramework="4.5" /> 
    <httpRuntime targetFramework="4.5" /> 
    </system.web> 
</configuration> 

Answer 1

Sembra che si sta utilizzando html5mode. In questo caso non c'è # per mantenere l'URL che cambia dalla richiesta al server. Con questa configurazione, hai bisogno di aiuto dal server. Servirà index.html quando riceve richieste dalle tue rotte SPA.

Questo SO answer ha dettagli sulla configurazione URL Rewrite sul web.config:

Regole passano:

<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="/" /> 
     </rule> 
     </rules> 
    </rewrite> 
    </system.webServer> 

Si presuppone che l'API è sotto: /api e per qualsiasi directory o file di che trova, serve così com'è. Qualsiasi altra cosa, viene riscritta su / che con documento predefinito configurato su index.html, carica SPA.

noti inoltre è necessario installare il URL Rewrite module per IIS (IIS Express doesn't need the module)

Un'altra opzione è uno di questi server HTTP pacchetti NPM leggeri. John Papa has one: lite-server. Esso utilizza BrowserSync sotto il cofano:

BrowserSync fa la maggior parte di quello che vogliamo in un server di sviluppo leggero super veloce. Serve il contenuto statico, rileva le modifiche, aggiorna il browser e offre numerose personalizzazioni.

Durante la creazione di una SPA esistono percorsi noti solo al browser . Ad esempio,/customer/21 potrebbe essere una route lato client per un'app angolare . Se questa rotta viene inserita manualmente o collegata direttamente a come punto di ingresso dell'App Angular (ovvero un deep link), il server statico riceverà la richiesta, poiché Angular non è ancora stato caricato. Il server non trova una corrispondenza per il percorso e quindi restituisce un 404. Il comportamento desiderato in questo caso è di restituire index.html (o qualsiasi pagina iniziale dell'app che abbiamo definito). BrowserSync fa non automaticamente per consentire una pagina di fallback. Ma consente il middleware personalizzato personalizzato. Questo è il punto in cui il server LITE interviene.

lite-server è un semplice wrapper personalizzato attorno a BrowserSync per rendere facile da servire alle SPA.