2016-11-15 11 views
7

Firebaseを使用してAngular 2アプリを作成しようとしていますが、ルートが動作していません。angular-cli Firebase hosting Angular 2ルータが動作しない

静的プライバシーポリシーページが必要な場所で働いているサイトに対して、2角型とtypescriptでプロジェクトを作成しました。

私は

ng serve 

を実行し、私は期待してコンテンツを取得し、私のブラウザでhttp://localhost:4200/privacy-policyに移動します。私はFirebaseはここに私のプロジェクトをホスティングするように構成

@NgModule({ 
    declarations: [ 
     AppComponent, 
     HomeComponent, 
     TermsOfServiceComponent, 
     PrivacyPolicyComponent, 
     PageNotFoundComponent 
    ], 
    imports: [ 
     AlertModule, 
     BrowserModule, 
     FormsModule, 
     HttpModule, 
     RouterModule.forRoot([ 
      {path: 'privacy-policy', component: PrivacyPolicyComponent}, 
      {path: 'terms-of-service', component: TermsOfServiceComponent}, 
      {path: '', component: HomeComponent}, 
      {path: '**', component: PageNotFoundComponent} 
     ]) 
    ], 
    providers: [], 
    bootstrap: [AppComponent] 
}) 
export class AppModule { 
} 

PAGE-角度2経路で推奨されているようにここで

はコードで私の設定は、[ファイル] -

{ 
    "database": { 
    "rules": "database.rules.json" 
    }, 
    "hosting": { 
    "public": "dist" 
    } 
} 

である私は

を実行配備します
ng build --prod 
firebase deploy 

https://MY-APP.firebaseapp.com/に移動したときデフォルトルートのアプリが正常に読み込まれます。

は、しかし、私はそれはNGが奉仕していたとして、これが動作するように期待しているだろう、私は404

を取得 https://MY-APP.firebaseapp.com/privacy-policy に移動しようとします。

ご協力いただければ幸いです。物事を、以下の追加app.module.tsファイルで

答えて

11

宣言

import { LocationStrategy, HashLocationStrategy} from '@angular/common'; 

とプロバイダには、これはあなたの問題を解決します

@NgModule({ 
     declarations: [...], 
     imports:[...], 
     providers:[..,{ provide: LocationStrategy, useClass: HashLocationStrategy },..] 
     ..., 
    }) 

希望を次のように追加します。

可能であれば、経路を別々のファイルに保存してください。

乾杯

+0

これは私の問題を修正しました。明確にするために、角度jを使用するfirebaseホスティングでは、フルパスのURLフラグメントを使用する必要があると言います。 https://MY-APP.firebaseapp.com/#/privacy-policy –

16

後期応答が、私はFirebaseに私のアプリを展開したとき、私は今日、同じ問題に直面しているので、ここではそのための簡単な修正は次のとおりです。

あなたfirebase.jsonファイルで、更新の規則を書き換えることによってあなたのホストキーを定義してください:

 
    "hosting": { 
    "public": "dist", 
    "rewrites": [ { 
     "source": "**", 
     "destination": "/index.html" 
    } ] 
    } 
+0

WebAppでHashLocationStrategyを使用したくないという答えです。ありがとう@Vlad – andreasonny83

+0

これは私のために働いた。 – user482594

+0

これは受け入れられた回答である必要があります –

関連する問題