Question

我用Angular创建了一个网站。我已经完成它并将其部署在Firebase Hosting中，但是在部署之后，我无法在我的网站中导航。我只是有一个从Firebase托管找不到404页面。好吧，当我在本地主机上启动我的网站时，我没有这个问题，而且我也不知道该如何解决...

我的app-routing.module.ts：

import { CommonModule } from '@angular/common';
import {RouterModule, Routes} from '@angular/router';
import {InfoMobileComponent} from './info-mobile/info-mobile.component';
import {ContactComponent} from './contact/contact.component';

const routes: Routes = [
  { path: '', redirectTo: '/info', pathMatch: 'full' },
  {
    path: 'info',
    component: InfoMobileComponent
  },
  {
    path: 'contact',
    component: ContactComponent
  },
];


@NgModule({
  declarations: [],
  imports: [
    CommonModule,
    RouterModule.forRoot(routes),
],
  exports: [ RouterModule ]
})
export class AppRoutingModule { }

我的firebase.json：

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

有关信息，我将项目构建到文件夹“ dist”。

Answer 1

当您说要在“ dist”文件夹中构建应用程序时，是否意味着您已经修改了angular的基本配置，以便不将其构建文件放入dist内的文件夹中？

默认情况下，Angular将应用程序的构建保存在“ dist”子文件夹中。

示例：dist / my-app

如果您的构建文件位于“ dist”子文件夹中，则必须按以下方式配置firebase：

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

PS：我们还必须记住在“ firebase初始化”时将所有请求重定向到index.html。

希望对您有所帮助！

Answer 2

我不确定您是否找到了所需的答案。使用Firebase时，我也遇到了问题。使用Angular 10时遇到两个问题。

首先需要在firebase.json的公共行中添加项目名称。因此，这就是jboileau173的描述。

我遇到的第二个问题是重定向。重定向一直显示未找到404页面。我正在使用Angular Routing，并且一切都在本地工作。为了使重定向生效，我必须将路由从app-routing.module.ts移到app.module.ts中。因此，现在我的app.module.ts包含以下行：

import { RouterModule } from '@angular/router';
    
import:[
    RouterModule.forRoot([
       { path: 'redirectPath', component: Redirectcomponent},
       { path: 'otherPathsNeeded', component: otherComponents}
    ])
]

我并不是说这是最好的答案，但这就是我如何使它为我工作的方式。

希望您能找到答案。

Firebase托管和路由Angular Project不起作用

2 个答案: