Угловая маршрутизация не работает в адресной строке URL - PullRequest
Новая
       11

Угловая маршрутизация не работает в адресной строке URL

0 голосов
/ 26 декабря 2018

Я сделал проект Angular с компонентами маршрутизации.И я обработал некоторую обработку URL, например, если пользователь нажимает на URL вручную: если URL существует, он переходит к компонентам URL, как определено в app-routing-module.ts , и если URL нене существует, он показывает страницу ошибки, как определено в коде PagenotFoundComponent.например, 

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import {HomeComponent} from './component/home.component';
import {AboutusComponent} from './component/aboutus.component';
import {SupportComponent} from './component/support.component';
import {PurchaseComponent} from './component/purchase.component';
import {PagenotfoundComponent} from './component/pagenotfound.component';
import {HowitworksComponent} from './component/howitworks.component';
import {ProductComponent} from './component/product.component';
import { ProductVarientDetailsComponent } from './component/product-varient-details.component';

const routes: Routes = [
  { path: '', redirectTo: '/home', pathMatch: 'full'},
  { path: 'home', component: HomeComponent},
  { path: 'about-us', component: AboutusComponent},
  { path: 'how-it-works', component: HowitworksComponent},
  { path: 'support', component: SupportComponent},
  { path: 'purchase', component: PurchaseComponent},
  { path: 'product/:name/details', component: ProductComponent},
  { path: 'product-variants', component: ProductVarientDetailsComponent},
  { path: '**', component: PagenotfoundComponent}
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }
export const routingComponents = [HomeComponent, AboutusComponent, SupportComponent,
                                  PurchaseComponent, PagenotfoundComponent, HowitworksComponent,
                                  ProductComponent, ProductVarientDetailsComponent];

Поэтому, когда я вручную нажимаю localhost: 4200 / home, он показывает мне страницу HomeComponent, а если я делаю этот localhost: 4200 / sdnbgbdfgbh, он показывает мне страницу PagenotfoundComponent на локальном сервере.

А потом я пошел по этой ссылке: https://angular.io/guide/deployment, чтобы развернуть мое угловое приложение.Я следую за шагами как док.говорит.

Мое приложение теперь работает полностью, но когда я выполняю ручную печать URL-адреса, оно показывает мне страницу сервера Apache Not Found.Просто эта штука не работает в приложении Angular.

Я развернул свое приложение на AWS EC2 на Apache Server в PORT 80.

1 Ответ

0 голосов
/ 27 декабря 2018

Попробуйте перенаправить на путь 404 следующим образом: 

const routes: Routes = [
   ...otherRoutes
   { path: '404', component: PagenotfoundComponent},
   { path: '**', redirectTo: '404'}
];

Если не работает, попробуйте настроить .htaccess в соответствии с Angular Documentation : 

RewriteEngine On
# If an existing asset or directory is requested go to it as it is
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR]
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d
RewriteRule ^ - [L]
# If the requested resource doesn't exist, use index.html
RewriteRule ^ /index.html

Помните, что все пути должны проходить через index.html в конфигурации Apache.

Или попробуйте этот документ, надеюсь, он поможет: 

https://github.com/mgechev/angular-seed/wiki/Deploying-prod-build-to-Apache-2
...