как развернуть угловое приложение с подстраницами на внешнем сервере - PullRequest
Новая
       53

как развернуть угловое приложение с подстраницами на внешнем сервере

0 голосов
/ 03 июня 2018

У меня есть простое угловое приложение с несколькими компонентами, и я хочу подать его на мой внешний сервер в Интернете, приложение работает с моим локальным сервером по команде ng serve, но когда я публикую его с помощью команды ng build --prod, этосоздать один HTML-файл, и когда я сохраняю все файлы создания этого ng build --prod в моем корневом каталоге сервера, сервер просто знает мою первую страницу, и когда я нажимаю для перехода на другую страницу, у меня появляется ошибка 404 (страница не найдена).

мой вопрос, как решить эту проблему, спасибо

app.component.html: 

<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>

app.module.ts 

const appRoutes: Routes = [
  { path: 'about-me', component: AboutMeComponent},
  { path: 'second-page', component: SecondPageComponent},
  { path: 'third-page', component: ThirdPageComponent}
];

Ответы [ 2 ]

0 голосов
/ 04 июня 2018

RewriteEngine On # Если запрашивается существующий ресурс или каталог, перейдите к нему, как к RewriteCond% {DOCUMENT_ROOT}% {REQUEST_URI} -f [OR] RewriteCond% {DOCUMENT_ROOT}% {REQUEST_URI} -d RewriteRule ^ - [L] # Если запрошенный ресурс не существует, используйте index.html RewriteRule ^ /index.html

0 голосов
/ 03 июня 2018

Ваш локальный сервер обычно находится под корнем адреса сервера, напр.http://localhost:xxxx.Но когда вы размещаете его на удаленном сервере, вы не можете развернуть его в корневой папке как http://mywebsite.com, вместо этого вы можете иметь его под http://mywebsite.com/myapp/.

Если это так, вам нужно установить одну вещь в вашем index.html, 

<base href="/myapp/">

или запустить 

ng build --base-href /myapp/
...