Angular 2 路由在部署到 Http 服务器时不起作用 [英] Angular 2 Routing Does Not Work When Deployed to Http Server

问题描述

我将开发一个简单的 Angular 2 应用程序.我使用 Angular CLI 创建了一个带有路由的项目，并使用ng generate component"命令向应用程序添加了几个组件.然后我在 app-routing.module.ts 中指定路由如下.

import { NgModule } from '@angular/core';从'@angular/router' 导入 { Routes, RouterModule };从 './home/home.component' 导入 { HomeComponent };从 './about/about.component' 导入 { AboutComponent };从 './user/user.component' 导入 { UserComponent };import { ErrorComponent } from './error/error.component';import { SpecialpageComponent } from './specialpage/specialpage.component';const 路由:路由 = [{小路: ''，组件:HomeComponent},{路径:'关于'，组件:关于组件},{路径:'用户'，组件:用户组件},{路径:'特殊页面'，组件:特殊页面组件},{小路: '**'，组件:错误组件}];@NgModule({进口:[RouterModule.forRoot(routes)]，出口:[路由器模块]，提供者:[]})导出类 AppRoutingModule { }

app.module.ts 如下.

<前>从'@angular/platform-b​​rowser' 导入 { BrowserModule };从'@angular/core' 导入 { NgModule };从'@angular/forms'导入{FormsModule}；从'@angular/http'导入{HttpModule}；import { AppRoutingModule } from './app-routing.module';从 './app.component' 导入 { AppComponent };从 './home/home.component' 导入 { HomeComponent };从 './about/about.component' 导入 { AboutComponent };import { ErrorComponent } from './error/error.component';从 './user/user.component' 导入 { UserComponent };import { SpecialpageComponent } from './specialpage/specialpage.component';@NgModule({声明: [应用组件，主页组件，关于组件，错误组件，用户组件，特殊页面组件],进口:[浏览器模块，表单模块，Http模块，应用路由模块],提供者:[]，引导程序:[AppComponent]})导出类 AppModule { }

我没有为其他组件添加任何修改.然后我使用ng serve"命令部署了该应用程序，该应用程序与链接一起工作正常.例如:

但是当我在 http-server 中部署项目时，链接没有按预期工作.我使用http-server ./dist"命令部署了应用程序，应用程序部署得很好，但链接不起作用.当我转到 '

我做错了什么吗?为什么ng-serve"有效而http-server"无效?

任何帮助将不胜感激.提前致谢.

我已将我的项目上传到 github.

解决方案

这个问题是通过实现 HashLocationStrategy 来解决的，它将 # 添加到你的所有路由中.您可以通过将 HashLocationStrategy 添加到 AppModule 提供程序来实现这一点.

 providers: [{provide: LocationStrategy, useClass: HashLocationStrategy}],

并添加相应的导入

 import { HashLocationStrategy, LocationStrategy } from '@angular/common';

这将解决您的问题.

如果你不想使用 HashLocationStrategy，你可以使用 PahtLocationStrategy，这样你的 Angular 应用就不会在 URL 中显示哈希.有关它的更多详细信息，请查看官方链接:https://angular.io/api/common/PathLocationStrategy

I am going to develop a simple Angular 2 application. I have created a project with routing, using Angular CLI and added several components to the app using 'ng generate component ' command. Then I specified routing in the app-routing.module.ts as following.

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';
import { UserComponent } from './user/user.component';
import { ErrorComponent } from './error/error.component';
import { SpecialpageComponent } from './specialpage/specialpage.component';

const routes: Routes = [
  {
    path: '',
    component: HomeComponent
  },
  {
    path: 'about',
    component: AboutComponent
  },
    {
    path: 'user',
    component: UserComponent
  },
  {
    path: 'specialpage',
    component: SpecialpageComponent
  },
  {
    path: '**',
    component: ErrorComponent
  }

];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
  providers: []
})
export class AppRoutingModule { }

app.module.ts is as following.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { AppRoutingModule } from './app-routing.module';

import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';
import { ErrorComponent } from './error/error.component';
import { UserComponent } from './user/user.component';
import { SpecialpageComponent } from './specialpage/specialpage.component';

@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
    AboutComponent,
    ErrorComponent,
    UserComponent,
    SpecialpageComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

I have not added any modifications for the other components. Then I deployed the application using 'ng serve' command and the app works fine with the links. Eg: http://localhost:4200/about

But when I deploy the project in http-server, the links do not work as expected. I deployed the app using 'http-server ./dist' command and the app gets deployed fine, but the links do not work. When I go to 'http://localhost:4200/about', it gives 404 error.

Am I doing anything wrong? Why 'ng-serve' works and 'http-server' does not work?

Any help would be appreciated. Thanks in advance.

I have uploaded my project to github.

解决方案

This problem is solved by implementing HashLocationStrategy which adds # to all your routes. You achieve this by adding HashLocationStrategy to AppModule providers.

    providers: [{provide: LocationStrategy, useClass: HashLocationStrategy}],

and add the corresponding import

   import { HashLocationStrategy, LocationStrategy } from '@angular/common';

This will solve your problem.

And if you don't want to use the HashLocationStrategy, you can use the PahtLocationStrategy, and so your Angular app will not show Hash in the URL. For more details about it check the official Link: https://angular.io/api/common/PathLocationStrategy

这篇关于Angular 2 路由在部署到 Http 服务器时不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！