不能GET /頁角2路由錯誤

我已經建立了角度的路由，在應用程序內工作完全正確，但是，如果我導航到我的關於頁面例如如此http://localhost:9000/about並刷新頁面我得到錯誤說"Cannot GET /about"，同樣的情況發生如果我打開一個新選項卡並粘貼網址並訪問該頁面。不能GET /頁角2路由錯誤

我boot.ts文件containint路由邏輯

// -- Typescript typings ------------------------------------------------------- 
/// <reference path="../typings/jquery.d.ts" /> 
/// <reference path="../typings/jqueryui.d.ts" /> 



//Imports ---------------------------------------------------------------------- 
import {Component, enableProdMode} from 'angular2/core'; 
import {bootstrap} from 'angular2/platform/browser'; 
import { 
    ROUTER_DIRECTIVES, 
    ROUTER_PROVIDERS, 
    Router, 
    RouteConfig, 
} from 'angular2/router'; 



// -- Application Imports ------------------------------------------------------ 
import {NavbarComponent} from './components/navbar.component'; 
import {HomePage} from './pages/home.page'; 



// -- Enable production module ------------------------------------------------- 
enableProdMode(); 



// -- Component ---------------------------------------------------------------- 
@Component({ 
    selector: 'main-app', 
    directives: [ ROUTER_DIRECTIVES, NavbarComponent ], 
    template: ` 
     <app-navbar></app-navbar> 
     <router-outlet></router-outlet> 
    ` 
}) 



// -- Routing ------------------------------------------------------------------ 
@RouteConfig([ 
    { path: '/', name: 'root', redirectTo: ['/Home'] }, 
    { path: '/home', name: 'Home', component: HomePage } 
]) 



// -- Class -------------------------------------------------------------------- 
export class MainApp { 
    constructor(public router: Router) {} 
} 



// -- Bootstrap for application ------------------------------------------------ 
bootstrap(MainApp, [ 
    ROUTER_PROVIDERS 
]);

index.html文件

<!doctype html> 
<html lang="en"> 
<head> 
    <base href="/"> 

    <meta charset="UTF-8"> 
    <title>Angular2 starter</title> 

    <!-- Application css --> 
    <link href="dist/libraries/bundle.css" rel="stylesheet"></link> 
    <link href="dist/styles/main.css" rel="stylesheet"></link> 
</head> 

<body> 
    <main-app>Loading...</main-app> 

    <!-- Application js --> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> 
    <script src="dist/libraries/bundle.js"></script> 
</body> 

<!-- ES6-related imports --> 
<script src="/node_modules/angular2/bundles/angular2-polyfills.js"></script> 
<script src="/node_modules/es6-shim/es6-shim.min.js"></script> 
<script src="/node_modules/systemjs/dist/system.js"></script> 
<script> 
    //configure system loader 
    System.config({defaultJSExtensions: true}); 
</script> 
<script src="/node_modules/rxjs/bundles/Rx.js"></script> 
<script src="/node_modules/angular2/bundles/angular2.min.js"></script> 
<script> 
    //bootstrap the Angular2 application 
    System.import('dist/app/boot').catch(console.log.bind(console)); 
</script> 

</html>

和項目結構

dist/ 
    app/ 
    components/ 
     navbar.component.js 
    pages/ 
     home.page.js 
    boot.js 
    assets/ 
    typings/ 
src/ 
    ... original files that are compiled into dist here 
index.html

來源

2016-01-28 Ilja

參見：http://stackoverflow.com/questions/34541532/is-angular-2s-router-broken-when-using-html5-routes – Langley

在你boot.ts，把這個：

import { bootstrap } from "angular2/platform/browser"; 
import { bind } from "angular2/core"; 
import { ROUTER_PROVIDERS, LocationStrategy, HashLocationStrategy } from "angular2/router"; 

bootstrap(MainApp, [ 
    ROUTER_PROVIDERS, 
    bind(LocationStrategy).toClass(HashLocationStrategy) 
]);

你的URL將與＃/家

來源

2016-01-28 17:45:01

什麼，如果我不需要這個＃登錄我的網址？有沒有其他的？ –

是的，當然，Angular2中有PathLocationStrategy，但它也需要進行服務器端修改。 –

這正是我在代碼服務器端修改中遇到的問題。謝謝 –

來補充弗拉多說，使用默認的策略，你需要一臺服務器配置所有的路徑重定向到您的HTML入口點文件。隨着hashbang方法，沒有必要......

你可以看看這個問題，這些問題：

希望它可以幫助你， Thierry

來源

2016-01-28 18:08:10

使哈希有你的路由

export const routing = RouterModule.forRoot(appRoutes, { useHash: true });

來源

2017-06-21 11:11:09

不能GET /頁角2路由錯誤

回答

相關問題