Question

我已经设置了在应用程序中完全正确的角度路由，但是如果我导航到我的about页面，例如http://localhost:9000/about并刷新页面，我会收到错误"Cannot GET /about"，同样的情况发生如果我打开一个新标签并在那里粘贴网址并访问该页面。

我的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
]);

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

Answer 1

在你的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)
]);

您的网址将与＃/ home

一起使用

Answer 2

为了补充Vlado所说的内容，使用默认策略，您需要一个服务器配置来将所有路径重定向到HTML入口点文件。使用hashbang方法，没有必要......

您可以查看有关此问题的以下问题：

希望它可以帮到你，亨利

Answer 3

启用路线的哈希

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

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

3 个答案: