angular-cli Firebase 托管 Angular 2 路由器不工作

Question

我正在尝试使用 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。

我原以为它会像 ng serve 那样工作。

如有任何帮助，我们将不胜感激。

Answer 1

回复晚了，但由于我今天在 Firebase 上部署我的应用程序时遇到了同样的问题，这里是快速修复它的方法:

在您的 firebase.json 文件中，通过定义重写 规则更新您的托管 key :

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