Angular 4路由在实时Web应用程序上不起作用 [英] Angular 4 Routing not working on live web-app
问题描述
我的Angular 4网络应用路由在我的开发环境中可以正常工作，并且菜单重定向在实时版本上也可以正常工作。
但是，开发人员版本可以重定向到通过在浏览器的地址栏中输入不同的页面，但实时版本则不会。这是一个角度问题吗？还是我需要通过ISP管理重定向？
我的app.router.ts代码如下：
从'@ angular / core'导入{ModuleWithProviders};
从 @ angular / router导入{Routes，RouterModule}；
从 ./home/home.component导入{HomeComponent}；
从 ./art/art.component导入{ArtComponent}；
从 ./music/music.component导入{MusicComponent}；
从 ./events/events.component导入{EventsComponent}；
导出const路由器：路由= [
{path：，redirectTo：'home'，pathMatch：'full'}，
{path：'home'，component ：HomeComponent}，
{路径： art，组件：ArtComponent}，
{路径： music，组件：MusicComponent}，
{路径： events，组件：EventsComponent }
];
导出const路由：ModuleWithProviders = RouterModule.forRoot（router）;
在app.module.ts中，我有：
从'@ angular / platform-browser'导入{pre>
import {BrowserModule};
从 @ angular / core导入{NgModule，}；
从 @ angular / router导入{RouterModule}；
从 ./app.router导入{router}；
导入 hammerjs；来自 @ angular / platform-browser / animations的
import {BrowserAnimationsModule};
从 @ angular / forms导入{FormsModule}；
import {来自 @ angular / material的MdInputModule，MdButtonModule，MdToolbarModule，MdMenuModule，MdGridListModule，MaterialModule，MdDatepickerModule，MdNativeDateModule}；从 @ angular / http中导入
{HttpModule}；
从 ./app.component导入{AppComponent}；
从 ./mf-toolbar/mf-toolbar.component导入{MfToolbarComponent}；
从 ./mf-menu/mf-menu.component导入{MfMenuComponent}；
从 ./splash/splash.component导入{SplashComponent}；
从 ./art/art.component导入{ArtComponent}；
从 ./music/music.component导入{MusicComponent}；
从 ./events/events.component导入{EventsComponent}；
从 ./home/home.component导入{HomeComponent};
从 ./image-slider/image-slider.component中导入{ImageSliderComponent}；
//从 ./date-data.service导入{HTTPTestService};
从 ./authentication-service.service导入{AuthenticationService}；
从 ./data.service导入{DataService}；
从 ./svg-viewer/svg-viewer.component导入{SvgViewerComponent}；
从 ./calendar/calendar.component导入{CalendarComponent}；
@NgModule（{
声明：[
AppComponent，
MfToolbarComponent，
MfMenuComponent，
SplashComponent，
ArtComponent，
MusicComponent，
EventsComponent，
HomeComponent，
ImageSliderComponent，
SvgViewerComponent，
CalendarComponent
]，
导入：[
BrowserModule，
BrowserAnimationsModule，
FormsModule，
MdInputModule，
MdButtonModule，
MdToolbarModule，
MdMenuModule，
MdDatepickerModule，
MdNativeDateModule ，
HttpModule，
RouterModule.forRoot（路由器），
]，
提供者：[
// [HTTPTestService]，
[AuthenticationService]，
[DataService]，
]，
引导程序：[AppComponent]
}）
导出类AppModule {}
我不知道forRoot在做什么或在Angular 4中使用它是否合适？
我的app.component.html如下所示，并使用了隐藏的路由器出口：
< body>
< app-mf-toolbar>< / app-mf-toolbar>
< router-outlet class = hidden-router>< / router-outlet>
< / body>
这是我的实时网络应用无法复制的隐藏路由器行为吗，我该如何更改？
我在menu.component.html中还有一个使用路由器链接的菜单，它可以正常工作：
< div class = container>
< md-menu＃appMenu = mdMenu>
< a routerLink = home>
< button md-menu-item>
< md-icon class = material-icons>主页< / md-icon>
< span>主页< / span>
< / button>
< / a>
< a routerLink = art>
< button md-menu-item>
< md-icon class = material-icons> format_paint< / md-icon>
< span>艺术< / span>
< / button>
< / a>
< a routerLink = music>
< button md-menu-item>
< md-icon class = material-icons> music_note< / md-icon>
< span>音乐< / span>
< / button>
< / a>
< a routerLink = events>
< button md-menu-item>
< md-icon class = material-icons> event_note< / md-icon>
< span>事件< / span>
< / button>
< / a>
< / md-menu>
< button md-icon-button [mdMenuTriggerFor] = appMenu color = secondary>
< i class = material-icons>菜单< / i>
< / button>
< / div>
您在这里遇到的问题与自然有关
在应用程序的已部署版本中，托管它的Web服务器仅知道如何提供它所看到的一个html文件（ index.html），它对应于您的根路径。第二个您尝试直接 http：// url-to-your-app / art 访问例如，服务器将抛出未找到的404，因为它无法识别出它可以作为资源的路径。
从应用程序本身，它是Angular的路由服务，用于管理客户端的导航；托管Web服务器实际上未接收到除index.html之外的其他网页请求。
另外，在开发人员上不会发生这种情况，因为您的开发人员Web服务器知道如何管理它。
您有两个选择：
- 配置生产Web服务器，使其在检测到404时始终以
index.html进行响应-这样，Angular将始终加载并且其路由服务将 - 将应用程序的locationStrategy更改为Hash位置策略，如
此处。
但是，这会更改应用程序的URL，我认为这不是
所希望的。
My Angular 4 web-app routing works fine in my dev environment, and the menu redirects work fine on the live version.
However, the dev version redirects to different pages by typing in the address field of the browser, but the live version doesn't. Is this an Angular problem? Or do I need to manage my redirects with my ISP?
My app.router.ts code is as follows:
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);
And in app.module.ts I have:
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 { }
I don't understand what forRoot is doing or if it's proper to use that in Angular 4?
My app.component.html is as follows and uses a hidden router outlet:
<body>
<app-mf-toolbar></app-mf-toolbar>
<router-outlet class="hidden-router"></router-outlet>
</body>
Is it this hidden router behaviour that my live web-app is not reproducing and how do I change this?
I also have a menu in menu.component.html that uses router links and this works fine:
<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>
The issue you have here has to do with the nature of Single Page Application frameworks, such as Angular.
On the deployed version of your app, the web server hosting it knows only how to serve the one html file it sees (index.html), which corresponds to your root path. The second you try to access directly http://url-to-your-app/art for example, the server will throw a 404 not found, as it does not recognize that as the path of a resource it can serve.
When navigating through your application from within the application itself, it's Angular's routing service that manages the navigation on the client side; the hosting web server does not actually receive requests to serve other web pages than your index.html. Also, this does not happen on dev because you dev web server knows how to manage this.
You have two options:
- Configure your production web server to always respond with the index.html whenever it detects a 404 - that way, Angular will always load and its routing service will handle the navigation on the client side.
- Change your app's locationStrategy to the Hash location strategy as described here. However, that would change your app's URLs, and it's not that desirable in my opinion.
这篇关于Angular 4路由在实时Web应用程序上不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
