URL-адрес в браузере не будет переходить к соответствующему маршрутизатору

У меня есть одностраничный веб-сайт, работающий на веб-сервере apache, написанный с использованием angular cli. У меня есть домашняя страница и несколько ссылок, которые перемещаются с помощью тега routerlink, которые работают нормально. Однако, когда я нажимаю, например, «о», он переходит на веб-сайт.net/about, и все идеально, пока страница не будет перезагружена или я вручную не наберу веб-сайт.net/about, когда он выдает ошибку 404.

Это основной код приложения:

индекс.html:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Title</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-root></app-root>
</body>
</html>

app.module.ts:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { RouterModule} from '@angular/router';

import { AppComponent } from './app.component';
import { ProgramsComponent } from './programs/programs.component';
import { AboutComponent } from './about/about.component';

@NgModule({
  declarations: [
    AppComponent,
    ProgramsComponent,
    AboutComponent
  ],
  imports: [
    BrowserModule,
    RouterModule.forRoot([{
        path: 'programs',
        component: ProgramsComponent
      },
      {
        path: 'about',
        component: AboutComponent
      }
    ])
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.component.ts:

import { Component } from '@angular/core';
import {ProgramsComponent} from './programs/programs.component';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'Title';
}

приложение.component.html:

<div id="header" style="text-align:Left">
  <header>
    <a href="../index.html">
      <h1>
        {{ title }}
      </h1>
    </a>
    <nav>
      <div class="nav-comp">
        <a routerLink="/about">About</a>
        <a routerLink="/programs">Programs</a>
      </div>
    </nav>
  </header>
</div>
<router-outlet></router-outlet>

любая помощь и / или ссылки будут оценены, если в качестве альтернативы, если это можно исправить с помощью веб-сервера apache, я был бы готов исправить это таким образом, но предпочел бы не


angular single-page-application angular-cli apache angular-routerlink
person b-rad15    schedule 27.05.2018    source источник
comment
используйте HashLocationStrategy   -  person Vikas    schedule 27.05.2018
comment
Я не понимаю, как вы можете использовать этот @Vikas, это просто функция angular по умолчанию и, похоже, не работает   -  person b-rad15    schedule 28.05.2018
comment
Обратитесь к этому angular.io/guide/   -  person Vikas    schedule 28.05.2018
comment
Либо вы используете HashLocationStrategy, либо настраиваете свой сервер для возврата резервной страницы.   -  person Vikas    schedule 28.05.2018

Ответы (2)


arrow_upward
0
arrow_downward

Я предполагаю, что проблема в вашей конфигурации apache, видимо, с вашим кодом все в порядке.

person Rodrigo Lanes    schedule 27.05.2018

arrow_upward
0
arrow_downward

Итак, мне пришлось немного покопаться, и я хотел бы поблагодарить u/vaskemaskine на Reddit за файл .htaccess и научный бафф на этот пост но вот я иду

Итак, сначала в /var/www/html мне пришлось создать файл с именем .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]

затем, чтобы это произошло, из-за изменения в Apache 2.4 мне пришлось AllowOverrides в /etc/apache2/apache2.conf, изменив

<Directory />
        Options FollowSymLinks
        AllowOverride None
        Require all denied
</Directory>

<Directory /usr/share>
        AllowOverride None
        Require all granted
</Directory>

<Directory /var/www/>
        Options Indexes FollowSymLinks
        AllowOverride None
        Require all granted
</Directory>

to

<Directory />
        Options FollowSymLinks
        AllowOverride All
        Require all denied
</Directory>

<Directory /usr/share>
        AllowOverride All
        Require all granted
</Directory>

<Directory /var/www/>
        Options Indexes FollowSymLinks
        AllowOverride All
        Require all granted
</Directory>

затем, однако, я получил ошибку при запуске RewriteEngine, так как он не был установлен, но это можно было устранить, просто запустив sudo a2enmod rewrite && sudo service apache2 restart в терминале

person b-rad15    schedule 28.05.2018