如何在线发布 Angular 项目？ index.html 文件管理

如何解决如何在线发布 Angular 项目？ index.html 文件管理

我有一个网站的角度项目。本网站使用 PHP 在线与数据库通信。

我上传了 PHP 文件并且与 DB 的通信有效。现在我正在尝试上传角度前端，但遇到了一些问题。

如果我尝试使用 example.com 搜索我的网站，我会收到此错误：“禁止，您无权访问此资源。”

这就是我所做的：

我在我的 angular 项目中打开了 cmd.exe，并使用 ng build --prod
我获取了创建的 dist 文件夹的内容，并使用 FileZilla

上传

Aruba

我上传了包含以下内容的 .htaccess 文件：

RewriteEngine on
RewriteCond %{REQUEST_FILENAME} -s [OR]
RewriteCond %{REQUEST_FILENAME} -l [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule ^.*$ - [NC,L]
RewriteRule ^(.*) /index.html [NC,L]

可能我的问题与 index.html 有关。网站的第一页应该是login.component.html，我的index.html在我编码过程中从未改变。

这是我的 index.html：

<!doctype html>
<html lang="it">
<head>
  <Meta charset="utf-8">
  <title>Angular</title>
  <base href="/">
  <Meta name="viewport" content="width=device-width,initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <link rel="preconnect" href="https://fonts.gstatic.com">
  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body class="mat-typography">
  <app-root></app-root>
</body>
</html>

这是我的 app-routing.modules.ts：

import { NgModule } from '@angular/core';
import { Testbed } from '@angular/core/testing';
import { RouterModule,Routes } from '@angular/router';
import { AdminComponent } from './admin/admin.component';
import { HomeComponent } from './home/home.component';
import { LoginRegisterComponent } from './login-register/login-register.component';
import { NuovoPiattoComponent } from './admin/nuovo-piatto/nuovo-piatto.component';
import { VotiComponent } from './admin/voti/voti.component';
import { NuovoIngredienteComponent } from './admin/nuovo-piatto/nuovo-ingrediente/nuovo-ingrediente.component';
import { VotoComponent } from './home/voto/voto.component';


const routes: Routes = [
  {
    //first page
    path: '',component: LoginRegisterComponent
  },{
    path: 'home',component: HomeComponent
  },{
    path: 'admin',component: AdminComponent
  },{
    path: 'admin/nuovo-piatto',component: NuovoPiattoComponent
  },{
    path: 'admin/voti',component: VotiComponent
  },{
    path: 'admin/nuovo-piatto/nuovo-ingrediente',component: NuovoIngredienteComponent
  },{
    path: 'home/voto',component: VotoComponent
  }
];

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

我什至没有接触 app.component.html / .ts 文件。

你能帮我吗？

如何在线发布 Angular 项目？ index.html 文件管理

如何解决如何在线发布 Angular 项目？ index.html 文件管理

相关推荐