无法获取 /page angular 2 路由错误
Posted
技术标签:
【中文标题】无法获取 /page angular 2 路由错误【英文标题】：Cannot GET /page angular 2 routing error 【发布时间】：2016-05-06 05:14:01 【问题描述】：我已经设置了在应用程序中完全正确的角度路由，但是如果我导航到我的 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
【问题讨论】：
见：***.com/questions/34541532/… 【参考方案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)
]);
您的 URL 将带有 #/home
【讨论】：
如果我不需要这个 # 登录我的 URL 怎么办？有替代品吗？ 是的，Angular2中当然有PathLocationStrategy，但也需要服务器端修改。 正是我在代码服务器端修改中遇到的问题。谢谢 在 webapi 项目中尝试了您的代码。不工作。import bootstrap from 'angular2/platform/browser'; import bind from "angular2/core"; import ROUTER_PROVIDERS, LocationStrategy, HashLocationStrategy from "angular2/router"; import AppComponent from './app.component'; import 'rxjs/Rx'; bootstrap(AppComponent,[ ROUTER_PROVIDERS, bind(LocationStrategy).toClass(HashLocationStrategy) ]).then( success => console.log('app bootstrapped...'), error => console.log(error) );
为此，您还需要添加 HTTP_PROVIDERS。所以要添加到上面的代码中。进行导入：从 'angular2/http' 导入 HTTP_PROVIDERS；并在引导行中的 ROUTER_PROVIDERS 之后添加 HTTP_PROVIDERS。【参考方案2】：
为了补充 Vlado 所说的，使用默认策略，您需要一个服务器配置来将您的所有路径重定向到您的 HTML 入口点文件。使用 hashbang 方法就没有必要了……
您可以查看有关此问题的以下问题：
When I refresh my website I get a 404. This is with Angular2 and firebase PathLocationStrategy vs HashLocationStrategy in web apps Is Angular 2's Router broken when using HTML5 routes?希望对你有帮助 蒂埃里
【讨论】：
【参考方案3】：为您的路由启用哈希
export const routing = RouterModule.forRoot(appRoutes, useHash: true );
【讨论】：
以上是关于无法获取 /page angular 2 路由错误的主要内容，如果未能解决你的问题，请参考以下文章