angular-cli Firebase托管Angular 2路由器无法正常工作

Question

我正在尝试使用Firebase托管一个角度2应用程序(使用角度cli创建),但我的路线无法正常工作.

我创建了一个带有角度2和打字稿的项目,用于我正在工作的网站,我想要一个静态隐私策略页面.

当我表演

ng serve

并在我的浏览器中导航到http:// localhost:4200/privacy-policy我得到了我期望的内容.

以下是角度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服务一样工作.

任何帮助将不胜感激.

Answer 1

迟到的响应,但是因为我今天在Firebase上部署我的应用程序时面临同样的问题,所以这是快速修复它:

在firebase.json文件中,通过定义重写规则来更新您的主机密钥:

  "hosting": {
    "public": "dist",
    "rewrites": [ {
      "source": "**",
      "destination": "/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/**"
    ]
  }
}