无法GET /页面角度2路由错误

Question

I've set up routing in angular that works perfectly correct within application, however if I navigate to my about page for example so http://localhost:9000/about and refresh the page I get error saying "Cannot GET /about" , same happens if I open a new tab and paste url there and visit the page. 我已经设置了在应用程序中完全正确的角度路由，但是如果我导航到我的about页面，例如http://localhost:9000/about并刷新页面，我会收到错误，说"Cannot GET /about" ，如果我打开一个新标签并在那里粘贴网址并访问该页面，也会发生同样的情况。

My boot.ts file containint routing logic 我的boot.ts文件包含路由逻辑

// -- 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
]);

the index.html file 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>

and project structure 和项目结构

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

Answer 1

In your boot.ts, put this: 在你的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)
]);

Your URL's will be with #/home 您的网址将与＃/ home一起使用

Answer 2

To complement what Vlado said, with the default strategy you need a server configuration to redirect all your paths to your HTML entry point file. 为了补充Vlado所说的，使用默认策略，您需要一个服务器配置来将所有路径重定向到HTML入口点文件。 With the hashbang approach it's not necessary... 使用hashbang方法，没有必要......

You could have a look at these questions about this issue: 您可以查看有关此问题的以下问题：

When I refresh my website I get a 404. This is with Angular2 and firebase 当我刷新我的网站时，我得到了404.这是使用Angular2和firebase
PathLocationStrategy vs HashLocationStrategy in web apps Web应用中的PathLocationStrategy与HashLocationStrategy
Is Angular 2's Router broken when using HTML5 routes? 使用HTML5路由时，Angular 2的路由器是否已损坏？

Hope it helps you, Thierry 希望它对你有帮助，蒂埃里

Answer 3

启用您的路线的哈希

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

无法GET /页面角度2路由错误

问题描述

3 个解决方案

解决方案1
3 已采纳 2016-01-28 17:45:01

解决方案2
2 2016-01-28 18:08:10

解决方案3
1 2017-06-21 11:11:09

无法GET /页面角度2路由错误

问题描述

3 个解决方案

解决方案1 3 已采纳 2016-01-28 17:45:01

解决方案2 2 2016-01-28 18:08:10

解决方案3 1 2017-06-21 11:11:09

解决方案1
3 已采纳 2016-01-28 17:45:01

解决方案2
2 2016-01-28 18:08:10

解决方案3
1 2017-06-21 11:11:09