web-dev-qa-db-ja.com

angle-cliFirebaseホスティングAngular 2ルーターが機能していません

Firebaseでangular 2アプリ（angular cli）で作成）をホストしようとしていますが、ルートが機能していません。

静的なプライバシーポリシーページが必要な場所で作業しているサイト用に、angular 2とTypeScriptを使用してプロジェクトを作成しました。

演奏するとき

ng serve

ブラウザで http：// localhost：4200/privacy-policy に移動します。期待するコンテンツが表示されます。

angular 2ルートページ-で推奨されているコードは次のとおりです。

@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 {
}

プロジェクトでFirebaseホスティングを設定しました。これが設定ファイルです-

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

デプロイするには、

ng build --prod
firebase deploy

https://MY-APP.firebaseapp.com/ に移動すると、アプリはデフォルトルートで正常に読み込まれます。

ただし、 https://MY-APP.firebaseapp.com/privacy-policy に移動しようとすると404が表示されます。

Ngserveの場合と同じようにこれが機能することを期待していました。

どんな助けでも大歓迎です。

angularfirebasefirebase-hosting
18
Philip Brack

あなたのapp.module.tsファイルは次のものを追加するだけです：

宣言する

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

およびプロバイダーでは、以下を追加します

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

これがあなたの問題を解決することを願っています。

また、可能であれば、ルートを別のファイルに保存してください。

乾杯

16
The Hungry Dictator

応答が遅れましたが、今日、Firebaseにアプリをデプロイしたときに同じ問題に直面したため、簡単に修正できます。

firebase.jsonファイルで、rewriteルールを定義してホスティングキーを更新します。

 "hosting"：{
 "public"： "dist"、
 "rewrites"：
 "source"： "**"、
 "destination"： "/index.html"

}
39
Vlad Berezan

Firebase.jsonを開きます

あなたがこれを持っているなら：

    "ignore": [
  "firebase.json",
  "**/.*",
  "**/node_modules/**"
]

** /。*行を削除します

だからあなたはこれを持っています：

"ignore": [
  "firebase.json",
  "**/node_modules/**"
]

私にこれを残して働いた：

    {
  "database": {
    "rules": "database.rules.json"
  },
  "firestore": {
    "rules": "firestore.rules",
    "indexes": "firestore.indexes.json"
  },
  "hosting": {
    "public": "dist",
    "rewrites": [ {
      "source": "**",
      "destination": "/index.html"
    } ],
    "ignore": [
      "firebase.json",
      "**/node_modules/**"
    ]
  }
}
3
Michael Staples

私はAngular 8で、これは私のために働いた

ng build --prod firebase deploy

また、firebase.jsonファイルは次のようになります。

    {
        "hosting": {
         "public": "dist/crm",
         "ignore": [
            "firebase.json",
            "**/.*",
            "**/node_modules/**"
         ],
         "rewrites": [
          {
            "source": "**",
            "destination": "/index.html"
          }
        ]
      }
    }

Dist/crmでは、crmはプロジェクトフォルダーの名前です。お役に立てば幸いです。

2
debugmode