Question

我有一个带有多个组件的简单角度应用程序，我想在互联网上将它提供给我的外部服务器，该应用程序通过命令ng serve与我的本地服务器一起工作但是当我使用命令{{1它创建一个单独的html文件，当我将此ng build --prod的所有创建文件存储到我的服务器的根目录中时，服务器只知道我的第一页，当我点击进入另一个页面我错误为404（未找到页面）。

我的问题是如何解决这个问题，谢谢

app.component.html：

ng build --prod

app.module.ts

<mat-sidenav-container class="sidenav-container">
  <mat-sidenav
    #drawer
    class="sidenav"
    fixedInViewport="true"
    [attr.role]="isHandset ? 'dialog' : 'navigation'"
    [mode]="(isHandset | async)!.matches ? 'over' : 'side'"
    [opened]="!(isHandset | async)!.matches">
    <mat-toolbar color="primary">Menu</mat-toolbar>
    <mat-nav-list>
      <a mat-list-item href="/about-me">About Me</a>
      <a mat-list-item href="/second-page">Projects</a>
      <a mat-list-item href="/third-page">Contact</a>
    </mat-nav-list>
  </mat-sidenav>
  <mat-sidenav-content>
    <mat-toolbar color="primary">
      <button
        type="button"
        aria-label="Toggle sidenav"
        mat-icon-button
        (click)="drawer.toggle()"
        *ngIf="(isHandset | async)!.matches">
        <mat-icon aria-label="Side nav toggle icon">menu</mat-icon>
      </button>
    </mat-toolbar>
    <router-outlet></router-outlet>
  </mat-sidenav-content>
</mat-sidenav-container>

Answer 1

您的本地服务器通常位于服务器地址的根目录下，例如。 http://localhost:xxxx。但是当您在远程服务器上托管它时，您可能不会将其作为http://mywebsite.com部署在根文件夹下，而是可以将其部署在http://mywebsite.com/myapp/下。

如果是这种情况，您需要在index.html，

中设置一件事

<base href="/myapp/">

或运行

ng build --base-href /myapp/

Answer 2

RewriteEngine On ＃如果请求现有资产或目录，请按原样查看 RewriteCond％{DOCUMENT_ROOT}％{REQUEST_URI} -f [OR] RewriteCond％{DOCUMENT_ROOT}％{REQUEST_URI} -d RewriteRule ^ - [L] ＃如果请求的资源不存在，请使用index.html RewriteRule ^ /index.html

如何将子页面的角度应用程序部署到外部服务器

2 个答案: