Come faccio a configurare IIS per la Riscrittura degli URL di un AngularJS applicazione in modalità HTML5?

Ho la AngularJS di semi di progetto e ho aggiunto

$locationProvider.html5Mode(true).hashPrefix('!');

per il app.js file. Voglio configurare IIS 7 per indirizzare tutte le richieste di

http://localhost/app/index.html

in modo che questo funziona per me. Come faccio a fare questo?

Aggiornamento:

Ho scoperto da poco, scaricato e installato il IIS URL Rewrite module, sperando in questo modo sarà facile e ovvio per raggiungere il mio obiettivo.

Aggiorna 2:

Credo che questo riassume quello che sto cercando di realizzare (tratto dal Documentazione per gli Sviluppatori AngularJS):

Utilizzando questa modalità richiede la riscrittura dell’URL sul lato server,
in pratica dovete riscrivere tutti i link alle punto di ingresso del vostro
applicazione (ad es. index.html)

Aggiorna 3:

Sto ancora lavorando su questo e mi rendo conto che ho bisogno di reindirizzamento (le regole di riscrittura) di alcuni Url come

http://localhost/app/lib/angular/angular.js
http://localhost/app/partials/partial1.html

quindi tutto ciò che è nel css, js, lib o parziali directory non è reindirizzata. Tutto il resto dovrà essere reindirizzati a app/index.html

Qualcuno sa come ottenere questo facilmente, senza dover aggiungere una regola per ogni singolo file?

Aggiorna 4:

Ho 2 in entrata regole definite in IIS URL Rewrite module. La prima regola è:

Come faccio a configurare IIS per la Riscrittura degli URL di un AngularJS applicazione in modalità HTML5?

La seconda regola è:

Come faccio a configurare IIS per la Riscrittura degli URL di un AngularJS applicazione in modalità HTML5?

Ora, quando naviga su localhost/app/view1 carica la pagina, comunque i file di supporto (quelli nel css, js, lib e parziali directory) sono anche essere riscritto per il app/index.html pagina – così tutto è tornato come index.html pagina non importa cosa URL viene utilizzato. Credo che questo significhi che la mia prima regola, che dovrebbe evitare questi Url trattati dalla seconda regola, non funziona.. qualche idea? …chiunque? …Mi sento così sola… 🙁

  • Grazie per questo! Molto utile!
  • la seconda regola è fondamentale: è necessario assicurarsi che si tratta di routing per app/index.html e non app/ esplicitamente innescare la pagina che serve AngularJS. ho perso 2 ore della mia vita, prima che l’ho capito. 🙂
  • Un altro modo per utilizzare ASP.NET MVC e aggiungere RouteConfig.cs: itinerari.MapRoute(nome: “Default”, url: “{*nulla}”, di default è: nuovo { controller = “Home”, action = “Index”, } ); e il tuo Indice di HomeController restituisce solo File(“~/index-anyhinghere.html”, “text/html”); Quindi la tua app diventa IIS indipendente
  • Ho dovuto installare “URL rewrite module dal Web Installer'”. Se l’url rewrite module non c’è, poi, mentre la ricarica, riscrivere non funziona. INSTALLARE URL rewrite module. 🙂
InformationsquelleAutor Dean | 2012-09-27

 

6 Replies
  1. 269

    Scrivo una regola nel web.config dopo $locationProvider.html5Mode(true) è situato in app.js.

    Speranza, aiuta qualcuno.

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

    Nel mio index.html ho aggiunto questo <head>

    <base href="/">

    Non dimenticate di installare IIS URL Rewrite sul server.

    Anche se è possibile utilizzare Web API e IIS, questo funzionerà se l’API è a www.yourdomain.com/api a causa di input di terzi (terza riga di condizione).

    • Questo è stato molto utile e ho trovato per essere il più completo. Grazie!
    • contento che aiuta @Mario
    • PERFETTO! Questo è stato un difficile problema per me, ha trascorso ore a lavorare su questo. Grazie! CONSIGLIO A CHIUNQUE ALTRO: ho aggiunto index.html a <azione type=”Riscrivere” url”/index.html” /> Allora il mio index.html (root directory del file per Angolare SPA, il <base href=”/index.html” /> Quando ho affrontato il codice di cui sopra, non corrispondono alla mia <base href /> quindi non funzionare correttamente. Enormi oggetti di scena per il “/(api)” pattern, ho continuato a inciampare su quella parte.
    • Bella soluzione, grazie!
    • che cosa succede se ho un host su siti web di Azure?
    • Toolkit, ho la stessa domanda. Ho sostanzialmente implementato esattamente come Brad Martin descritto su dicembre 31, ma non sembra aiutare. Questo può essere correlato ad Azure. Necessità di approfondire …
    • Io uso IIS 7.5 e attivare l’ $locationProvider.html5Mode(vero) e il <base href=”/MyAppName/index.html” /> fatto anche il web.config regole, ma il mio pulsante indietro mi butta fuori l’app , non si sa come risolvere il problema ??
    • Per l’aggregazione e la minimizzazione di lavoro (supponendo che tutto il bundle nomi contengono il ‘gruppo’) ; <aggiungere input=”{REQUEST_URI}” pattern=”^/(bundle)” negare=”true” /> Testato con angolare-interfaccia utente del router
    • Bello… Che aiuta
    • Ho provato la stessa cosa suggerita da @Yagiz Ozturk. Le regole aggiunte nel web.config, aggiunto il percorso di base in <head>, installato anche di Riscrittura degli Url 2.0 ma ancora ricevo l’errore 404. Sto usando IIS 10
    • come cambiare questo nel web.config RewriteEngine On Options FollowSymLinks RewriteBase / RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteRule ^(.*)$ /#/$1 [L] RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteRule ^(.*)/(.*)$ /#/$1/$2 [L]
    • Ozturk. Dopo la sostituzione di “api” con il mio il mio nome di directory, non ricevo l’errore 404 non il caricamento della pagina. Dopo aver premuto F5, schermo diventa vuoto. Sto usando componenti e componente di routing. Dopo aver premuto F5, <ngOutlet> non è caricato
    • Grazie @YagizOzturk!, Questo ha funzionato dopo l’installazione di IIS URL Rewrite module 2
    • E ‘ una barzelletta, si deve saltare attraverso questi cerchi per Angolare di routing. Questo uccide angolare di routing per me. Ciò che un pasticcio.
    • L’esempio sopra quasi lavorato come scritto, ho dovuto correggere il percorso di “(api) per primo. Poi, quando ho notato nel mio browser client > modalità di sviluppo in Rete, il mio Riposante richiamate non sono state mostrando, ho aggiunto una quarta regola {REQUEST_URI} pattern=”(/*.scriptName)” negare=”true” tutto è iniziato a lavorare. Nota: se ho colpito il pulsante di aggiornamento, Angolare non sa come stato di reset sul percorso. Questo è uno sviluppatore (mi) bug o funzionalità a seconda di come si guarda il mondo. Grazie per il tuo post Ozturk!
    • Questo ha funzionato perfettamente. Tranne quando si tenta di richiamare il OAuthAuth con Asp.Net WebApi. Il mio TokenEndpointPath era di default e non sotto /api. Considerare l’aggiunta di <add input="{REQUEST_URI}" pattern="^/(token)" negate="true" /> alla fine della lista di condizioni. Quindi il tuo autenticazione di lavoro.
    • Funziona per me, grazie! Ma ho avuto l’URL Rewrite module già installato. Quando ho aggiunto la regola di riscrittura non stava funzionando. Ho bisogno di andare in “Programmi e Funzionalità”, trovare “IIS URL Rewrite Module 2” e quindi di riparazione su chiamata per questo modulo. Ora funziona!
    • Ha funzionato come un fascino! Thankyouuuuuu
    • Grazie mille
    • grazie è molto utile, specialmente {REQUEST_URI}…
    • PERFETTO! peccato che la velocità angolare di squadra ha preso il tuo codice, ma non ha menzionato il api parte

  2. 36

    IIS regole connessioni in entrata, come indicato nella domanda di lavoro. Ho dovuto cancellare la cache del browser e aggiungere la seguente riga nella parte superiore del mio <head> sezione del index.html pagina:

    <base href="/myApplication/app/" />

    Questo è perché ho più di una applicazione in localhost e quindi le richieste di altri parziali sono state adottate per localhost/app/view1 invece di localhost/myApplication/app/view1

    Speriamo che questo aiuta qualcuno!

    • Non ho bisogno di questo, ma la questione delle modifiche alla grande. Grazie!
    • Anche questo può essere utile. Ha lavorato per me quando ricarico la pagina. Senza regole particolari per ogni file: coderwall.com/p/mycbiq
    • come @ash-clarke ha detto, non è necessario, ma è buona pratica in ogni caso, in quanto consente il link sulla pagina per essere agnostico su cui “sottodirectory” a cui esso appartiene.
    • Ho trovato la soluzione di cui sopra funziona, ma non su reload, ecco il codice: stackoverflow.com/questions/25644287/iis-url-rewrite-rules Qualche idea?
    • Non so o provato ti filtrare determinate chiamate. Un modo per aggirare sarebbe API su un altro dominio, etc. Ma forse questa non è una soluzione per u. Ma u può continuare a chiedere nel mio link qui sopra. E forse l’autore in grado di rispondere?
    • Grazie per questo e per i commenti di tutti. Nel mio caso, dato che sto usando un .NET MVC struttura, invece di specificare una pagina per la regola di riscrittura, ho specificato l’URL del MVC percorso per la pagina di indice e che ha fatto. (ie. localhost/Home/Index). Inoltre, ho dovuto conto per le chiamate api nella regola di riscrittura. In ogni caso, questo thread mi ha indicato la giusta direzione! Grazie
    • Si può anche fare qualcosa di simile a questo: [HttpGet, Route(“”, Ordine = 1), Percorso(“{angularRoute}”, Ordine = 2)] pubblico ViewResult Indice() { return Visualizza(); } Questo potrebbe essere ciò che @Nanar fa riferimento.
    • Avuto lo stesso problema; la cancellazione della cache a quanto pare è la chiave, non farlo funzionare altrimenti.

  3. 9

    Nel mio caso ho continuato a ottenere una 403.14 dopo che ho avuto il setup corretto le regole di riscrittura. Si scopre che ho avuto una directory con lo stesso nome, come uno dei miei URL percorsi. Una volta che ho tolto il IsDirectory regola di riscrittura miei percorsi funzionato correttamente. C’è un caso in cui la rimozione della directory negazione può causare problemi? Non riesco a pensare di qualsiasi, nel mio caso. L’unico caso che mi viene in mente è se è possibile accedere a una directory con la tua app.

    <rule name="fixhtml5mode" stopProcessing="true">
      <match url=".*"/>
      <conditions logicalGrouping="MatchAll">
        <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
      </conditions>
      <action type="Rewrite" url="/" />
    </rule>
  4. 9

    Il problema con solo queste due condizioni:

      <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
      <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />

    è che funzionano solo come la {REQUEST_FILENAME} esiste fisicamente sul disco. Questo significa che ci possono essere gli scenari in cui una richiesta per un’erroneamente denominato parziale vista, avrebbe restituito il root pagina 404 che potrebbe causare angolare per essere caricato due volte (e in alcuni casi può causare una brutta loop infinito).

    Così, alcuni cassetta di sicurezza di “ripiego” regole dovrebbero essere raccomandato di evitare difficoltà e risolvere i problemi:

      <add input="{REQUEST_FILENAME}" pattern="(.*?)\.html$" negate="true" />
      <add input="{REQUEST_FILENAME}" pattern="(.*?)\.js$" negate="true" />
      <add input="{REQUEST_FILENAME}" pattern="(.*?)\.css$" negate="true" />

    o di una condizione che corrisponde a qualsiasi file che termina:

    <conditions>
      <!-- ... -->
      <add input="{REQUEST_FILENAME}" pattern=".*\.[\d\w]+$" negate="true" />
    </conditions>
  5. 1

    Il modo più semplice che ho trovato è solo per reindirizzare le richieste che il trigger 404 per il cliente. Questo è fatto con l’aggiunta di un hashtag, anche quando $locationProvider.html5Mode(true) è impostato.

    Questo trucco funziona per ambienti con più Applicazione Web sul Sito Web stesso e che richiedono URL vincoli di integrità (E. G. di autenticazione esterno). Ecco passo per passo come fare

    index.html

    Impostare il <base> elemento in modo

    <base href="@(Request.ApplicationPath + "/")">

    web.config

    Reindirizzare 404 a una pagina personalizzata, ad esempio “Home/Errore”

    <system.web>
        <customErrors mode="On">
            <error statusCode="404" redirect="~/Home/Error" />
        </customErrors>
    </system.web>

    Casa controller

    Implementare un semplice ActionResult di “tradurre” l’ingresso in un clientside percorso.

    public ActionResult Error(string aspxerrorpath) {
        return this.Redirect("~/#/" + aspxerrorpath);
    }

    Questo è il modo più semplice.


    È possibile (consigliabile?) per migliorare la funzione di Errore con alcuni migliorata la logica di reindirizzare 404 del cliente solo quando l’url è valido e lasciare che il 404 trigger normalmente quando non si troverà niente sul client.
    Diciamo che hanno questi angolare percorsi

    .when("/", {
        templateUrl: "Base/Home",
        controller: "controllerHome"
    })
    .when("/New", {
        templateUrl: "Base/New",
        controller: "controllerNew"
    })
    .when("/Show/:title", {
        templateUrl: "Base/Show",
        controller: "controllerShow"
    })

    Ha senso URL di reindirizzamento al cliente solo quando si inizia con “/Nuovo” o “/Show/”

    public ActionResult Error(string aspxerrorpath) {
        //get clientside route path
        string clientPath = aspxerrorpath.Substring(Request.ApplicationPath.Length);
    
        //create a set of valid clientside path
        string[] validPaths = { "/New", "/Show/" };
    
        //check if clientPath is valid and redirect properly
        foreach (string validPath in validPaths) {
            if (clientPath.StartsWith(validPath)) {
                return this.Redirect("~/#/" + clientPath);
            }
        }
    
        return new HttpNotFoundResult();
    }

    Questo è solo un esempio di un miglioramento di logica, naturalmente, ogni applicazione web ha esigenze diverse

  6. 0

    Sto cercando di implementare un semplice Angolare 7 applicazione, di un Azzurro Web App.
    Tutto ha funzionato bene, fino al punto in cui si aggiorna la pagina. Così facendo, stava presentando a me con un errore 500 – spostato il contenuto.
    Ho letto sia sul Angolare docs e in giro per un bel po ‘ di forum, che ho bisogno di aggiungere un web.file di configurazione per il mio impiego di una soluzione e assicurarsi che la regola di riscrittura di riserva la index.html file.
    Dopo ore di frustrazione e di prova e di errore di prove, ho trovato l’errore è stato abbastanza semplice: l’aggiunta di un tag in giro per il mio file di markup.

Lascia un commento