角2路由不工作在部署到HTTP服务器

我要开发一个简单的角度2应用程序。我使用Angular CLI创建了一个包含路由的项目，并使用'ng generate component'命令将多个组件添加到应用程序中。然后，我指定的APP-routing.module.ts如下路由。角2路由不工作在部署到HTTP服务器

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是如下。

 
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 { }

我还没有为其他组件添加任何修改。然后我用“吴服”命令和应用程序正常工作与链接部署的应用程序。如：http://localhost:4200/about

但是当我部署的HTTP服务器的项目，该链接不正常工作。我使用'http-server ./dist'命令部署应用程序，应用程序部署正常，但链接不起作用。当我去'http://localhost:4200/about'，它会给出404错误。

上午我做错了什么？为什么'ng-serve'的作品和'http-server'不起作用？

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

我已经上传我的项目github。

来源

2017-04-21 kinath_ru

尝试'进口：[RouterModule.forRoot（routes，{useHash：true}）]，'。如果以这种方式工作，则需要在生产服务器上启用HTML5 pushState。 –

@GünterZöchbauer，我试过了，但是没有运气 –

也试着给这条路线加上'pathMatch：'full''''，'，' –

这不会发生，因为它去找到一个页面约这是根本不存在，因此404可能的选项里面：如果你想要去的HTTP服务器，然后使用代理

这会将所有内容重定向到http://localhost:your-port。

选项： -P或--proxy代理无法在本地解析到给定url的所有请求。例如： - -P http://someurl.com

不要使用快递的。使用快递创建您自己的http服务器&将所有内容重定向到index.html

假设公共是您的文件夹，其中保留所有转发的东西。

var express = require('express'); 
var app = express(); 

var path = __dirname + '/public'; 
var port = 8080; 

app.use(express.static(path)); 
app.get('*', function(req, res) { 
    res.sendFile(path + '/index.html'); 
}); 
app.listen(port);

来源

2017-04-21 06:10:37

对不起，我没有把你弄得很好。我真的是Angular的新手。我在这里没有做任何复杂的事情。关于您的第一个选项，我试图托管我的服务器，并且我访问了没有端口的URL。只有根网址有效。无法导航到其他链接。 –

-1

export const routes: Routes =[ 
    **{ path: '', redirectTo: '/', pathMatch: 'full'},** 
    { path: 'about', component: AboutComponent}, 
    { path: 'user', component: UserComponent}, 
    { path: 'specialpage', component: SpecialpageComponent}, 
    { path: '**', component: ErrorComponent} 
    ];

看看块引用的内容。然后你给出名称为“HttpModule”的providers:[]在app.module.ts

谢谢。

来源

2017-04-21 07:15:05

@ C.Peterscu我照你所说的去做了。但我无法得到它的工作。我将我的项目上传到https://github.com/kinathru/multiple-page-app。 –

这个问题可以通过实施HashLocationStrategy这增加#到的所有路由解决。您通过添加HashLocationStrategy to AppModule providers来实现此目的。

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

，并添加相应的进口

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

这将解决您的问题。

来源

2017-06-19 13:11:07 Manu

非常感谢你为这宝贵的一个....这对我真的很有帮助。 –

我有同样的问题，我也有我的app.modules.ts。我没有收到任何404错误。在应用程序组件初始化方法后，没有任何东西正在加载，就好像我的路线不工作。 ng服务工作正常，但我的localhost不.. – Ziggler

-2

你可以做到这一点，而你的注册RouterModule.forRoot，你可以通过第二个对象与PROPERT {useHash：真正}像下面：

import {NgModule} from '@angular/core'; 
import {BrowserModule} from '@angular/platform-browser'; 
import {AppComponent} from './app.component'; 
import {appRoutes} from './app.routes'; 

@NgModule({ 
    declarations: [AppComponent], 
    imports: [BrowserModule], 
    RouterModule.forRoot(appRoutes , {useHash: true})], 
    providers: [], 
    bootstrap: [AppComponent], 
}) 
export class AppModule {}

来源

2017-06-30 08:46:43 abahet

我有同样的问题，但解决方案不起作用 –

我有同样的问题。 ng服务工作良好，但当我部署到我的本地，本地/不工作 – Ziggler

这是因为HTTP服务器不支持回退像lite-server或web pack-dev服务器。这就是为什么它显示404找不到。有2溶液中的两种解决方案来解决这个问题：

可以使用HashLocationStrategy像上面提到。
如果您将其部署到Apache或IIS服务器，那么您可以简单地添加配置，如上所述here！

注意：对于开发，您可以使用lite-server。

希望这会帮助你。

来源

2017-10-04 13:17:46

-1

更改您的index.html

<base href="/"> 
to 
<base href="./">

因为我们使用的是Tomcat，我们已经提到了这一点（。）用于路由基于此（/）所以同样喜欢HTTP服务器

我的意思正常运行纳克为您服务只看到 http://localhost:4200/

但在服务器上运行你在web应用把你打造成为（DIST）

所以其来像

http://localhost:8080/dist/

，所以你需要添加<base href="./">

我认为这是问题，你可能会得到解决。

来源

2017-10-10 09:55:03

-1

在项目文件夹

创建.htaccess文件的然后写

RewriteEngine On 
RewriteCond %{HTTP_HOST} ^example\.com$ [NC] 
RewriteRule^http://www.%{HTTP_HOST}%{REQUEST_URI} [L,R=301,NE] 

RewriteCond %{REQUEST_FILENAME} !-f 
RewriteCond %{REQUEST_FILENAME} !-d 
RewriteRule^index.html [L]

请点击此链接： https://angular.io/guide/deployment

来源

2018-01-21 18:04:10

-1

对于Apache服务器：

在生产服务器

将“.htaccess”文件添加或创建到项目根目录中，向其添加重写规则。htaccess文件如图所示

RewriteEngine On 
    # If an existing asset or directory is requested go to it as it is 
    RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR] 
    RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d 
    RewriteRule^- [L] 
    # If the requested resource doesn't exist, use index.html 
RewriteRule^/index.html

来源

2018-02-13 04:39:42

角2路由不工作在部署到HTTP服务器

回答

相关问题