AngularJSは＃を削除し、ページを更新するときにエラーが発生する

私はAngularJS webappを持っており、Tomcat 7で開始します。 $locationProvider.html5Mode(true)を使用すると、私は、URLAngularJSは＃を削除し、ページを更新するときにエラーが発生する

localhost:8080/App/#/login -> localhost:8080/App/login

からハッシュ '＃' を削除しかし、私はlocalhost:8080/App/loginを更新すると、今、私が404 errorを持っています。 localhost:8080/App/loginのためのTomcat7の設定方法

のapp.config：

$urlRouterProvider.otherwise("/login/"); 

$stateProvider 
     .state('home', { 
      abstract: true, 
      templateUrl: 'dist/view/home.html', 
      controller: 'HomeCtrl' 
     }); 

$locationProvider.html5Mode(true);

のindex.html：

<head> 
    <meta charset="utf-8"> 
    <script> 
     document.write('<base href="' + document.location + '" />'); 
    </script> 
</head>

出典

2015-10-01 TestUser

あなたは完全な再読み込みを行うときは、常に現在のURLを持つサーバにリクエストを送信するためです。 Angularはまだロードされていないので、ルートを処理することはできません。サーバーは角度のないルートが何であるかについて何も知らない。

html5modeなしAngularはタイプがwww.example.com/#/pageの断片化したURLを使用する。＃はもともとアンカーリンクに使用されていたので、慣習上、URLのフラグメント部分はサーバによって完全に無視されます。上記のリクエストには、www.example.com/と同じものがあります。おそらくindex.htmlの場所です。したがって、あなたのページを再読み込みすると、index.htmlが取得され、Angularがロードされ、URLのフラグメント部分（＃/ページ）が処理されます。

ただし、html5modeではフラグメントが非表示になり、URLは通常のURLのように見えます。www.example.com/pageしかし、ページをリロードすると、サーバーはフラグメントを取得しないので、/ pageの下にあるものを見つけることができます。これはおそらく何もありません。あなたに404を渡すと、index.htmlが読み込まれていないのでAngularが読み込めず、ページが壊れています。

これを修正する一般的な方法は、静的アセット（またはそのパターン）と一致しないすべてのURLの下でサーバーがindex.htmlを配信するようにすることです。したがって、イメージを要求すると、それを見つけて返すことになりますが、/ pageを要求すると（それは静的なアセットとして存在しません）、index.htmlを返します。次にAngularが起動し、URLを読み、正しいルートをトリガーします。

私はこれをnginxで行っただけなので、Tomcatがどのようにして行うのか分かりませんが、原則は同じでなければなりません。

出典

2015-10-01 12:21:51

あなたはnginxソリューションを手伝ってもよろしいですか？ –

私は最後にやってからしばらくしていましたが、このようないくつかの要点があります：https://gist.github.com/zdwolfe/6721115 あなたが何を見せているかに加えて、画像/ javascriptファイルを提供する静的/静的。 –

1）

$routeProvider 
    .when('/path', { 
    templateUrl: 'path.html', 
    }); 
$locationProvider 
    .html5Mode(true);

2）サーバ側、ちょうどあなたのルートフォルダ内の.htaccess入れて、ペーストし、この

ewriteEngine On 
Options FollowSymLinks 

RewriteBase/

RewriteCond %{REQUEST_FILENAME} !-f 
RewriteCond %{REQUEST_FILENAME} !-d 
RewriteRule ^(.*)$ /#/$1 [L]

乾杯....

出典

2015-10-23 21:00:16

をAngularJS Erik Honnは論理についてよく説明します。ここで私はhttps://github.com/paultuckey/urlrewritefilter

するとMavenを使用して依存関係を追加するか、jarファイルをダウンロードしTuckyのurlrewritefilterとジャージーとTomcat 7を使用して、それを解決した方法です。
```
<dependency> 
    <groupId>org.tuckey</groupId> 
    <artifactId>urlrewritefilter</artifactId> 
    <version>4.0.3</version> 
</dependency> 
```

WEB-INFディレクトリにあるweb.xmlファイルにフィルタマッピングを追加します。これはweb-appタグ内にある必要があります。

<filter> 
    <filter-name>UrlRewriteFilter</filter-name> 
    <filter-class>org.tuckey.web.filters.urlrewrite.UrlRewriteFilter</filter-class> 
</filter> 
<filter-mapping> 
    <filter-name>UrlRewriteFilter</filter-name> 
    <url-pattern>/*</url-pattern> 
    <dispatcher>REQUEST</dispatcher> 
    <dispatcher>FORWARD</dispatcher> 
</filter-mapping>

WEB-INF内のファイルを作成しますurlrewrite.xmlと呼ばれ、XMLが設定されているので、再起動することを忘れないでください

<?xml version="1.0" encoding="utf-8"?> 
<!DOCTYPE urlrewrite PUBLIC "-//tuckey.org//DTD UrlRewrite 4.0//EN" 
"http://www.tuckey.org/res/dtds/urlrewrite4.0.dtd"> 

<!-- 

Configuration file for UrlRewriteFilter 
http://www.tuckey.org/urlrewrite/ 

--> 
<urlrewrite> 

<rule> 
<from>^/titles$</from> 
<to>index.html</to> 
</rule> 

<rule> 
<from>^/authors$</from> 
<to>index.html</to> 
</rule> 

<rule> 
<from>^/courses$</from> 
<to>index.html</to> 
</rule> 

<rule> 
<from>^/account$</from> 
<to>index.html</to> 
</rule> 

</urlrewrite>

をindex.htmlにするために再ルーティングを追加します。誰かがルートを束ねる方法を知っていて、個々のルールを設定するのではなく、すべてindex.htmlに行くのは素晴らしいことです。

出典

2015-11-28 20:01:55 mhatch

1）ダウンロードurlrewritefilter-4.0.3.jar

2）のindex.htmlが存在する場合、ルートディレクトリにWEB-INFフォルダを作成します。

3）ダウンロードしたjarファイルをWEB-INF &に入れてください。

4）WEB-INFでweb.xmlファイルを作成します。それに次のコードを入れてください。それ

<?xml version="1.0" encoding="utf-8"?><!DOCTYPE urlrewrite PUBLIC-//tuckey.org//DTD UrlRewrite 3.2//EN" 
    "http://tuckey.org/res/dtds/urlrewrite3.2.dtd"><urlrewrite> 

<rule enabled="true"> 
    <from>/[0-9_-a-zA-Z\/]+$</from> 

    <to>/%{context-path}/</to> 
</rule>/urlrewrite>

これは、Tomcatの7 & Tuckyのurlrewritefilter https://github.com/paultuckey/urlrewritefilter

@mhatchを使用しているに

<?xml version="1.0" encoding="ISO-8859-1"?> 
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee     http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd" version="3.1" metadata complete="true"> 
<display-name>Welcome to Tomcat</display-name><description>Welcome to Tomcat</description><welcome-file-list><welcome-file>index.html</welcome-file></welcome-file-list> 
<filter> 
<filter-name>UrlRewriteFilter</filter-name> 
<filter-class>org.tuckey.web.filters.urlrewrite.UrlRewriteFilter</filter-class></filter><filter-mapping><filter-name>UrlRewriteFilter</filter-name><urlpattern>/*</url-pattern><dispatcher>REQUEST</dispatcher> <dispatcher>FORWARD</dispatcher></filter-mapping></web-app>

5）urlrewrite.xmlファイルWEB-INF

プット以下のコードを作成します。すべてのルートがindex.htmlをに行くbudleするには、この書き換えルールを試すことができます。

<rule enabled="true"> 
    <from>/[0-9_-a-zA-Z\/]+$</from> 

    <to>/%{context-path}/</to>

これは私のために働きました。

出典

2016-11-30 07:43:22 Sneha

ハッシュ（＃）を削除する場合は、すべてのパスに対してindex.htmlを提供するためにサーバで書き換え機能を使用する必要があります。そうでない場合は、常に404エラーが発生します。 404をindex.htmlにリダイレクトできるということです。

アパッチ：ここにショーとして.htaccessファイルに書き換えルールを追加します。

RewriteEngine On 
# If an existing asset or directory is requested go to it as it is 
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR] 
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d 
RewriteRule^- [L] 
# If the requested resource doesn't exist, use index.html 
RewriteRule^/index.html

nginxの：使用try_files、フロントコントローラパターンのWebアプリで説明したように、index.htmlを提供するように変更：

try_files $uri $uri/ /index.html;

IIS：書き換えルールを01に追加するここに示したものと同様、：tomcatので

<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"> 
     </add></add></conditions> 
     <action type="Rewrite" url="/"> 
     </action></match></rule> 
    </rules> 
    </rewrite> 
</system>

は、web.xmlにそれを追加することができます。

<?xml version="1.0" encoding="UTF-8"?> 
<web-app version="3.0" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd"> 
    <error-page> 
     <error-code>404</error-code> 
     <location>/</location> 
    </error-page> 
</web-app>

は後に、index.htmlにHTML5の歴史APIをウェブ経路をリダイレクトAngular JSではWebルートを制御するために使用されます。私たちの主な仕事は、サーバーでindex.htmlと呼ばれるだけです。

出典

2017-03-20 04:18:10

ちょうど私が私がindex.phpので、私が代わりにindex.html

乾杯のindex.phpを書いているindex.htmlを持っていけないhtaccess

RewriteEngine on 
# Don't rewrite files or directories 
RewriteCond %{REQUEST_FILENAME} -f [OR] 
RewriteCond %{REQUEST_FILENAME} -d 
RewriteRule^- [L] 
# Rewrite everything else to index.html to allow html5 state links 
RewriteRule^index.php [L]

でこれを書きます！

出典

2017-03-21 07:00:15

私は最近、この問題の解決策を見つけました。この解決策は、.htaccessファイルでApache2に切り替える必要がありません。 web.xmlに

：これはWebContentの内の既存のファイルは通常通り提供されるようになります

<% response.setStatus(HttpServletResponse.SC_OK); %> 
<%@ include file="index.html" %>

、：

<welcome-file-list> 
    <welcome-file>index.html</welcome-file> 
</welcome-file-list> 
<error-page> 
    <error-code>404</error-code> 
    <location>/rewrite-404.jsp</location> 
</error-page>

その後書き換え404.jspと呼ばれるのWebContentに新しいファイルを作成します通常は404エラーを返すすべてのリクエストで、200（OK）レスポンスコードでindex.htmlを返します。

出典

2017-05-11 18:19:15 krispy

AngularJSは＃を削除し、ページを更新するときにエラーが発生する

答えて

関連する問題