2017-01-08 6 views
0

最新のAngular CLI(現在はbeta25)に取り組んでいるアプリケーションを最近更新しました。 ngを使用すると、すべてのルーティングが完全にローカルで動作します。Angular 2 CLIアプリケーション展開後に404エラーが発生する

次に、ng build --prodを使用して、distディレクトリを圧縮し、私のWebサーバー(現在はAWS Tomcatでホストされています)にロードします。 index.htmlをナビゲートすると、デフォルトルートを使用して「ホーム」コンポーネントにドロップされます。すべてがその点まで働いています。私はブラウザを更新した場合、しかし、私は

import { Routes, RouterModule } from '@angular/router'; 

import { HomeComponent } from './home/home.component'; 
import { SolutionComponent } from './solution/solution.component'; 
import { AssetComponent } from './asset/asset.component'; 
import { PropertyComponent } from './property/property.component'; 

export const appRoutes: Routes = [ 
{ 
    path: 'home', 
    component: HomeComponent 
}, 
{ 
    path: 'solution', 
    component: SolutionComponent 
}, 
{ 
    path: 'asset', 
    component: AssetComponent 
}, 
{ 
    path: 'asset/:solutionId', 
    component: AssetComponent 
}, 
{ 
    path: 'property/:solutionId', 
    component: PropertyComponent 
}, 
{ 
    path: 'property', 
    component: PropertyComponent 
},  
{ 
    path: '', 
    redirectTo: '/home',   
    pathMatch: 'full' 
}, 
]; 
(ここに参照のための私のapp.routing.tsです)私はアプリ内の他のビューにしよう404またいかなる直接的かつディープリンクナビゲーションが同様に404を投げる取得します

私はこれがPathLocationStrategyに関連している可能性があることを他の投稿で読んでおり、one in particularは、ベースhrefを次のように調整する必要があることを示しました。

<!doctype html> 
<html> 
<head> 
    <base href="./"> 

ドットの有無にかかわらず、アプリのバージョンを配備しようとしましたが、問題は引き続き発生します。私は一種の困惑しています。私は似たような問題を抱えている人については読んだが、文書化された良い解決策は見つけられていない。私はAngular 2コミュニティの誰かが何が起こっているのかを明らかにし、前進する方法を私に知らせるのを助けてくれることを願っています。前もって感謝します!

EDIT 1/15/2017: 誰にとっても役立つ場合は、「完成した」Angular2 CLIアプリケーションをホストされた環境に展開するために必要なことをいくつか強調しておきたいと思います。

まず、AWS(かなり標準的なホスティングオプション)のApache Tomcat8の書き換えバルブを有効にするには、Tomcat書き換えバルブを有効にしてcontext.xmlファイルを交換するためにElasticBeanstalk ebextensions機能を使用しなければなりませんでした。 サーバupdate.configファイルは私のために、このように見えた:

container_commands: 
    replace-config: 
    command: cp .ebextensions/context.xml /etc/tomcat8/context.xml 

第二に、URL自体を書き換えます。そこにはまだ私には発生していないこと、これを行うために、よりエレガントな方法であることが、私のrewrite.configは現在、次のようになりますことがあります。

# match requests for basic resource files and pass them through without substitution 
RewriteCond %{REQUEST_URI} ^.*\.(css|js|jpg|png|ico|woff2|woff|ttf).*$ 
RewriteRule ^.*$ - [L] 

# app-specific rules 
# match app routes and redirect to index.html 
RewriteCond %{REQUEST_URI} ^.*\/home.*$ [OR] 
RewriteCond %{REQUEST_URI} ^.*\/solution.*$ [OR] 
RewriteCond %{REQUEST_URI} ^.*\/asset.*$ [OR] 
RewriteCond %{REQUEST_URI} ^.*\/property.*$ 
RewriteRule ^.*$ /index.html [L] 
+0

あなたのサーバーでurl rewriteを構成する必要があります。1日ほど前に投稿を見たことがありません。 – 12seconds

+0

を除いて。あなたのアプリケーションをビルドするフォルダに持っているなら、または

+0

のようなものを試してみてください。この回答はhttp:// stackoverflowを参照してください。com/questions/41519810/refresh-page-got-404-only-happen-dist-folder/41523241#41523241 – Sebastian

答えて

0

Webサーバー上でHTML5のpushstateのサポートを有効にする必要があります。

これは、nginx、Apache、IIS、その他のWebサーバーにとっては非常に簡単です。

これは、次の条件を実装書き換え規則のセットを介して行われます。要求が存在するファイルのためであれば

  • 、それ
  • を返すそれ以外のindex.htmlに
を返します

あなたの特定のウェブサーバー上の指示をGoogleが検索する必要があります。

+0

私が旅行していたので、あなたの指示を確認するのに私はしばらくかかったが、今朝はApacheで作業しています。 前のページに戻って戻るには、戻るボタンを2回クリックする必要があるという点でちょっと奇妙なことがありますが、今のところそれで生きることができます。少なくとも私のアプリは正しく機能しています。ご協力いただき誠にありがとうございます。 – rswillis

+1

@rswillisこの問題のために行った変更は何ですか? ..私はapacheサーバーで同じ問題を抱えています。 –

関連する問題