2016-12-14 49 views
0

我在寫一個使用AngularJS的SPA產品,由使用NodeJS的Express服務。 NodeJS/Express還爲SPA提供了API。在生產中,SPA將坐在代理之後(Apache,或者將來可能是nginx) - 即使沒有代理,也存在以下問題。 ngRoute用於提供路由。Angular ngRoute重定向到格式不正確的URL

我最初是在本地測試應用程序,一切工作正常。我將repo克隆到測試服務器,但出於某種原因,當我嘗試使用該應用程序時,這些URL格式錯誤。

正常情況下,當頁面加載應用程序重定向到localhost:8080/#/homehome是全部路徑)。但是,在測試服務器上時,它會重定向到domain.com/#!/home#%2Fhome

如果我點擊一個鏈接,該鏈接應該將URL更改爲domain.com/#/quotations(href設置爲相對,而不是絕對),我會得到domain.com/#!/home#%2Fquotations

我的路由器配置:

app.config(['$routeProvider', function($routeProvider){ 
    // Routes 
    $routeProvider 
    .when('/home', { 
     templateUrl: '/views/home/home.html' 
    }) 
    .when('/staff', { 
     templateUrl: '/module/staff/views/staff.html', 
     controller: 'staffController', 
     controllerAs: 'staff' 
    }) 
    .when('/error', { 
     templateUrl: '/views/error/error.html', 
     css: '/views/error/error.css' 
    }) 
    .otherwise({ 
     redirectTo: '/home' 
    }); 
}]); 

在我的主服務器的NodeJS文件我只使用web.use(Express.static('public_html'))設置快遞服務包含SPA的文件夾public_html

我曾嘗試將<base href="/">添加到我的index.html頭部,但這沒有什麼區別。 Angular和Express都沒有配置爲執行與默認設置不同的任何操作來重寫頁面URL,所以我對這個問題非常困惑。

+0

是否有可能你正在使用的角度兩個不同的庫在您的測試和本地服務器?我看到「!」這個字符是1.6 – bhantol

回答

1

在角1.6 $現在的位置增加了一個「!」如果你想刪除它,你可以這樣做:

appModule.config(['$locationProvider', function($locationProvider) { 
    $locationProvider.hashPrefix(''); 
}]); 

檢查這個問題,可以幫助... Angular web app having extra ! in the url

0

根據您的路由選擇,您應該在頭標中使用<base href="@Url.Content("~/")" />,並使用$locationProvider.html5Mode(true);關於生產中的路由配置從url中刪除#

這將解決問題,如果這樣的作品,你總是可以恢復基於角的URL格式使用#

另一種選擇是在您的節點配置使用此代碼:

<VirtualHost *:80> 
    DocumentRoot "/public_html" 
    ServerName domain.com 
    ServerAlias www.domain.com 
</VirtualHost>