Angular -cli Firebase хостинг Angular 2 маршрутизатора не работает

Я пытаюсь разместить приложение angular 2 (созданное с помощью angular cli) с Firebase, но мои маршруты не работают.

Я создал проект с 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.

Любая помощь будет принята с благодарностью.

Ответ 1

В вашем файле app.module.ts просто добавьте следующие вещи:

объявить

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

а в провайдерах добавьте следующие

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

Надеюсь, это решит вашу проблему.

И, если возможно, сохраните свои маршруты в отдельном файле.

Приветствия

Ответ 2

Поздний ответ, но поскольку я столкнулся с такой же проблемой сегодня, когда я развернул мое приложение в Firebase, вот для него быстрое решение:

В вашем файле firebase.json обновите свой хостинг-ключ, указав правила переписать:

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

Ответ 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/**"
    ]
  }
}

Ответ 4

Я на 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 - это имя папки проекта. Я надеюсь, что это помогает.