web-dev-qa-db-ja.com

Angular 4ルーティングがライブWebアプリで機能しない

私のAngular 4 Webアプリルーティングは私の開発環境で正常に機能し、メニューリダイレクトはライブバージョンで正常に機能します。

ただし、開発バージョンはブラウザのアドレスフィールドに入力することで別のページにリダイレクトしますが、ライブバージョンはリダイレクトしません。これはAngularの問題ですか？それともISPでリダイレクトを管理する必要がありますか？

私のapp.router.tsコードは次のとおりです。

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

import { HomeComponent } from './home/home.component';
import { ArtComponent } from './art/art.component';
import { MusicComponent } from './music/music.component';
import { EventsComponent } from './events/events.component';

export const router: Routes = [
{ path: '', redirectTo: 'home', pathMatch: 'full'},
{ path: 'home', component: HomeComponent },
{ path: 'art', component: ArtComponent },
{ path: 'music', component: MusicComponent },
{ path: 'events', component: EventsComponent }
];

export const routes: ModuleWithProviders = RouterModule.forRoot(router);

そしてapp.module.tsに私は持っています：

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

import 'hammerjs';

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { FormsModule } from '@angular/forms';
import { MdInputModule, MdButtonModule, MdToolbarModule, MdMenuModule, MdGridListModule, MaterialModule, MdDatepickerModule, MdNativeDateModule } from '@angular/material';
import { HttpModule } from '@angular/http';

import { AppComponent } from './app.component';
import { MfToolbarComponent } from './mf-toolbar/mf-toolbar.component';
import { MfMenuComponent } from './mf-menu/mf-menu.component';
import { SplashComponent } from './splash/splash.component';
import { ArtComponent } from './art/art.component';
import { MusicComponent } from './music/music.component';
import { EventsComponent } from './events/events.component';
import { HomeComponent } from './home/home.component';
import { ImageSliderComponent } from './image-slider/image-slider.component';

// import { HTTPTestService } from './date-data.service';
import { AuthenticationService } from './authentication-service.service';

import { DataService } from './data.service';
import { SvgViewerComponent } from './svg-viewer/svg-viewer.component';
import { CalendarComponent } from './calendar/calendar.component';

@NgModule({
  declarations: [
    AppComponent,
    MfToolbarComponent,
    MfMenuComponent,
    SplashComponent,
    ArtComponent,
    MusicComponent,
    EventsComponent,
    HomeComponent,
    ImageSliderComponent,
    SvgViewerComponent,
    CalendarComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    FormsModule,
    MdInputModule,
    MdButtonModule,
    MdToolbarModule,
    MdMenuModule,
    MdDatepickerModule, 
    MdNativeDateModule,
    HttpModule,
    RouterModule.forRoot( router ),
  ],
  providers: [
    // [HTTPTestService],
    [AuthenticationService],
    [DataService],
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

ForRootが何をしているのか、それをAngular 4？

私のapp.component.htmlは次のとおりで、隠しルーターアウトレットを使用しています。

<body>
<app-mf-toolbar></app-mf-toolbar>
<router-outlet class="hidden-router"></router-outlet>
</body>

私のライブWebアプリが再現していないのは、この隠されたルーターの動作ですか？これを変更するにはどうすればよいですか？

Menu.component.htmlには、ルーターリンクを使用するメニューもあります。これは正常に機能します。

<div class="container">
    <md-menu #appMenu="mdMenu">
        <a routerLink="home">
            <button md-menu-item>
                <md-icon class="material-icons"> home </md-icon>
                <span> Home </span>
            </button>
        </a>
        <a routerLink="art">
            <button md-menu-item>
                <md-icon class="material-icons"> format_Paint </md-icon>
                <span> Art </span>
            </button>
        </a>
        <a routerLink="music">
            <button md-menu-item>
                <md-icon class="material-icons"> music_note </md-icon>
                <span> Music </span>
            </button>
        </a>
        <a routerLink="events">
            <button md-menu-item>
                <md-icon class="material-icons"> event_note </md-icon>
                <span> Events </span>
            </button>
        </a>
    </md-menu>

    <button md-icon-button [mdMenuTriggerFor]="appMenu" color="secondary">
       <i class="material-icons">menu</i>
    </button>
</div>
angulartypescriptroutingurl-routing
6
Davtho1983

ここでの問題は、Angularなどのシングルページアプリケーションフレームワークの性質に関係しています。

デプロイされたバージョンのアプリでは、アプリをホストしているウェブサーバーは、ルートパスに対応する1つのhtmlファイル（index.html）を提供する方法しか知りません。 2番目に直接アクセスしようとすると http：// url-to-your-app/art たとえば、サーバーは404をスローします。これは、サーバーが404をパスとして認識しないためです。提供できるリソース。

アプリケーション自体の中からアプリケーションをナビゲートする場合、クライアント側でナビゲーションを管理するのはAngularのルーティングサービスです。ホスティングWebサーバーは、index.html以外のWebページを提供する要求を実際には受信しません。また、開発Webサーバーはこれを管理する方法を知っているため、これは開発では発生しません。

2つのオプションがあります。

  1. 404を検出するたびにindex.htmlで常に応答するように本番Webサーバーを構成します。そうすると、Angularが常に読み込まれ、そのルーティングサービスがクライアント側のナビゲーションを処理します。
  2. 説明されているように、アプリのlocationStrategyをハッシュロケーション戦略に変更します ここ 。ただし、それによってアプリのURLが変更されるため、私の意見ではそれほど望ましくありません。
17
Andrei Matracaru
RouterModule.forRoot(routes, {useHash: true})

ここでhashLocationStrategiesの使用法を参照してください： https://codecraft.tv/courses/angular/routing/routing-strategies/#_hashlocationstrategy

1
vars