4
私の開発環境でAngular 4 web-appルーティングがうまく動作し、ライブバージョンでメニューリダイレクトが正常に機能します。角度4のルーティングがライブウェブアプリケーションで動作しない
しかし、devバージョンはブラウザのアドレスフィールドに入力することによって別のページにリダイレクトされますが、ライブバージョンは表示されません。これは角度の問題ですか？または、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>
解決していますか？ –
私の彼の答えはここhttps://stackoverflow.com/questions/45862243/angular-router-get-404-bug/48374763#48374763 –