角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服務器

回答

相關問題