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

Question

我正在尝试使用 Firebase 托管一个 Angular 2 应用程序（使用 Angular cli 创建），但我的路由不起作用。

我为我正在处理的网站创建了一个带有 angular 2 和 typescript 的项目，我想要一个静态隐私政策页面。

当我表演时

ng serve

然后在我的浏览器中导航到http://localhost:4200/privacy-policy，我会得到我期望的内容。

这是 angular 2 route page 推荐的代码-

@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 文件中，通过定义 rewrite 规则来更新您的托管密钥：

“主办”：{ “公共”：“dist”， “重写”：[{ “资源”： ”**”， “目的地”：“/index.html” }] }

Answer 2

在您的 app.module.ts 文件中添加以下内容：

声明

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

并在提供者中添加以下内容

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

希望这能解决您的问题。

如果可能，请将您的路线保存在单独的文件中。

干杯

Answer 3

打开 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/**"
    ]
  }
}

Answer 4

我在 Angular 8 上，这对我有用

ng 构建 --prod 火力基地部署

我的 firebase.json 文件如下所示：

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

在 dist/crm 中，crm 是项目文件夹的名称。我希望它有所帮助。