the

the

关注
发信
关注(28)粉丝(399)

Angular 4 Routing 不适用于实时网络应用程序

本文介绍了Angular 4 Routing 不适用于实时网络应用程序的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我的 Angular 4 网络应用路由在我的开发环境中运行良好，菜单重定向在实时版本中运行良好.

然而，开发版本通过在浏览器的地址字段中键入来重定向到不同的页面，但实时版本不会.这是一个角度问题吗?还是我需要通过我的 ISP 管理我的重定向?

我的app.router.ts代码如下:

import { ModuleWithProviders } from '@angular/core';从'@angular/router' 导入 { Routes, RouterModule };从 './home/home.component' 导入 { HomeComponent };从 './art/art.component' 导入 { ArtComponent };从 './music/music.component' 导入 { MusicComponent };从 './events/events.component' 导入 { EventsComponent };导出 const 路由器:路由 = [{路径:''，redirectTo:'home'，pathMatch:'full'}，{ path: 'home', 组件: HomeComponent },{路径:'艺术'，组件:艺术组件}，{ 路径:'音乐'，组件:音乐组件 }，{ 路径:'事件'，组件:事件组件 }];导出常量路由: ModuleWithProviders = RouterModule.forRoot(router);

在 app.module.ts 中我有:

import { BrowserModule } from '@angular/platform-b​​rowser';导入 { NgModule, } from '@angular/core';从 '@angular/router' 导入 { RouterModule };从'./app.router'导入{路由器}；导入'hammerjs'；从@angular/platform-b​​rowser/animations"导入 { BrowserAnimationsModule };从'@angular/forms' 导入 { FormsModule };import { MdInputModule, MdButtonModule, MdToolbarModule, MdMenuModule, MdGridListModule, MaterialModule, MdDatepickerModule, MdNativeDateModule } from '@angular/material';从'@angular/http'导入{HttpModule}；从 './app.component' 导入 { AppComponent };import { MfToolbarComponent } from './mf-toolbar/mf-toolbar.component';import { MfMenuComponent } from './mf-menu/mf-menu.component';从 './splash/splash.component' 导入 { SplashComponent };从 './art/art.component' 导入 { ArtComponent };从 './music/music.component' 导入 { MusicComponent };从 './events/events.component' 导入 { EventsComponent };从 './home/home.component' 导入 { HomeComponent };import { ImageSliderComponent } from './image-slider/image-slider.component';//import { HTTPTestService } from './date-data.service';从'./authentication-service.service'导入{AuthenticationService}；从'./data.service'导入{数据服务}；从 './svg-viewer/svg-viewer.component' 导入 { SvgViewerComponent };从 './calendar/calendar.component' 导入 { CalendarComponent };@NgModule({声明: [应用组件，MfToolbarComponent,MfMenuComponent,飞溅组件，艺术组件，音乐组件，事件组件，主页组件，图像滑块组件，SvgViewer 组件，日历组件],进口:[浏览器模块，浏览器动画模块，表单模块，Md输入模块，MdButton 模块，MdToolbar 模块，MdMenuModule,MdDatepicker 模块，MdNativeDateModule,Http模块，RouterModule.forRoot( router ),],提供者:[//[HTTPTestService],[认证服务],[数据服务],],引导程序:[AppComponent]})导出类 AppModule { }

我不明白 forRoot 在做什么，或者在 Angular 4 中使用它是否合适?

我的 app.component.html 如下，并且使用了隐藏的路由器插座:

我的实时网络应用程序没有重现这种隐藏的路由器行为，我该如何更改?

我在 menu.component.html 中也有一个使用路由器链接的菜单，这很好用:

<md-menu #appMenu="mdMenu"><a routerLink="home"><md-icon class="material-icons">主页 </md-icon><跨度>主页 </span></a><a routerLink="art"><md-icon class="material-icons">format_paint </md-icon><跨度>艺术 </span></a><a routerLink="音乐"><md-icon class="material-icons">music_note </md-icon><跨度>音乐</a><a routerLink="事件"><md-icon class="material-icons">event_note </md-icon><跨度>事件 </span></a></md-菜单><button md-icon-button [mdMenuTriggerFor]="appMenu" color="secondary"><i class="material-icons">菜单</i>
解决方案

您在这里遇到的问题与单页应用程序框架(例如 Angular)的性质有关.

在您的应用程序的部署版本上，托管它的网络服务器只知道如何提供它看到的一个 html 文件 (index.html)，它对应于您的根路径.第二个您尝试直接访问 http://url-to-your-app/art例如，服务器将抛出 404 not found，因为它没有将其识别为它可以提供服务的资源的路径.

当从应用程序内部浏览应用程序时，是 Angular 的路由服务在客户端管理导航；托管网络服务器实际上并没有收到为 index.html 以外的其他网页提供服务的请求.此外，这不会发生在开发上，因为您的开发网络服务器知道如何管理它.

您有两个选择:

  1. 配置您的生产网络服务器以始终响应index.html 每当检测到 404 时 - 这样，Angular 将始终加载并且其路由服务将在客户端处理导航.
  2. 将您的应用的 locationStrategy 更改为描述的哈希位置策略此处.但是，这会更改您的应用程序的 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:

  1. Configure your production web server to always respond with theindex.html whenever it detects a 404 - that way, Angular will always load and its routing service will handle the navigation on the client side.
  2. Change your app's locationStrategy to the Hash location strategy as describedhere.However, that would change your app's URLs, and it's not thatdesirable in my opinion.

这篇关于Angular 4 Routing 不适用于实时网络应用程序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

09-15 23:46
Powered by LMLPHP ©2024 the 0.007912