Angular 4 Routing無法在實時網絡應用程序上工作

我的Angular 4網絡應用程序路由在我的開發環境中正常工作，並且菜單重定向在實時版本上正常工作。Angular 4 Routing無法在實時網絡應用程序上工作

但是，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>

來源

2017-08-21 Davtho1983

是你的問題解決了嗎？ –

我的回答他在這裏https://stackoverflow.com/questions/45862243/angular-router-get-404-bug/48374763#48374763 –

你這裏的問題有單頁應用程序框架，如性質做角。

在部署的應用程序版本上，託管它的Web服務器只知道如何爲它看到的一個html文件（index.html）提供服務，該文件對應於您的根路徑。例如，您嘗試直接訪問http://url-to-your-app/art，那麼服務器將拋出404找不到，因爲它不會將其識別爲可以服務的資源的路徑。

在應用程序本身中瀏覽應用程序時，它是Angular的路由服務，它管理客戶端的導航;託管Web服務器實際上並沒有收到服務於您的index.html之外的其他網頁的請求。此外，這不會發生在dev上，因爲您的開發Web服務器知道如何管理這個。

你有兩個選擇：

配置你的Web服務器產品時，它檢測到404始終與的index.html迴應 - 這樣，角將永遠載入和路由服務將處理導航在客戶端。
將您的應用的locationStrategy更改爲哈希位置策略 here。但是，這會改變你的應用程序的URL，我認爲這不是。

來源

2017-08-21 15:52:19

好吧我試過使用重定向，但它仍然沒有正確的重定向！這似乎沒有做任何事情：{path：'404'，redirectTo：'home'，pathMatch：'full'}， {path：'**'，redirectTo：'home'，pathMatch：'full'} ， – Davtho1983

你沒有真正理解我 - 你需要配置你的web服務器（如IIS，nginx，apache，無論你使用什麼）來返回index.html，當它收到一個請求，將導致一個404 HTTP響應被送回。你不需要爲你的Angular路由配置做任何事情。 –

好吧我諮詢了1＆1指南並創建了一個.htaccess文件，但沒有任何工作 - 看起來很多人都有同樣的問題！有什麼建議麼？ – Davtho1983

RouterModule.forRoot(routes, {useHash: true})

見hashLocationStrategies使用這裏： https://codecraft.tv/courses/angular/routing/routing-strategies/#_hashlocationstrategy

來源

2018-02-28 22:53:53 vars

Angular 4 Routing無法在實時網絡應用程序上工作

回答

相關問題