使用 angular2 rc4 将所有无效 url 重定向到特定组件

Question

我正在用 "@angular/router": "3.0.0-beta.2" 编写一个 angular2 rc4 应用程序。

现在我有两条路线，welcome 和 help，我创建了另一条路线，将其他所有内容重定向到 welcome 组件。

这是我的 routes.ts 文件：

import { provideRouter, RouterConfig } from "@angular/router";
import {WelcomeComponent} from "./welcome.component";
import {HelpComponent} from "./help.component";

export const routes:RouterConfig = [
    { path: "",redirectTo: "welcome"},
    { path: "welcome", component: WelcomeComponent },
    { path: "help",component: HelpComponent}
];

export const APP_ROUTER_PROVIDERS = [
    provideRouter(routes)
];

我的服务器是 GoLang，我配置了所有无效的 url 将重定向到 index.html

所以现在如果我浏览例如：localhost/weclome2，它确实向我显示了内容欢迎组件，但浏览器上的 url 仍然指向 welcome2 而不是 welcome 我还在 javascript 控制台中收到以下错误：

EXCEPTION: Error: Uncaught (in promise): Error: Cannot match any routes: 'welcome2'
VM8530:27 EXCEPTION: Error: Uncaught (in promise): Error: Cannot match any routes: 'welcome2'window.console.error @ VM8530:27BrowserDomAdapter.logError @ bundle.js:50349BrowserDomAdapter.logGroup @ bundle.js:50359ExceptionHandler.call @ bundle.js:11343(anonymous function) @ bundle.js:14458schedulerFn @ bundle.js:14747SafeSubscriber.__tryOrUnsub @ bundle.js:15377SafeSubscriber.next @ bundle.js:15326Subscriber._next @ bundle.js:15279Subscriber.next @ bundle.js:15243Subject.next @ bundle.js:14835EventEmitter.emit @ bundle.js:14735onError @ bundle.js:19058onHandleError @ bundle.js:19270ZoneDelegate.handleError @ bundle.js:5267Zone.runGuarded @ bundle.js:5173_loop_1 @ bundle.js:5427drainMicroTaskQueue @ bundle.js:5434ZoneTask.invoke @ bundle.js:5366
VM8530:27 STACKTRACE:window.console.error @ VM8530:27BrowserDomAdapter.logError @ bundle.js:50349ExceptionHandler.call @ bundle.js:11345(anonymous function) @ bundle.js:14458schedulerFn @ bundle.js:14747SafeSubscriber.__tryOrUnsub @ bundle.js:15377SafeSubscriber.next @ bundle.js:15326Subscriber._next @ bundle.js:15279Subscriber.next @ bundle.js:15243Subject.next @ bundle.js:14835EventEmitter.emit @ bundle.js:14735onError @ bundle.js:19058onHandleError @ bundle.js:19270ZoneDelegate.handleError @ bundle.js:5267Zone.runGuarded @ bundle.js:5173_loop_1 @ bundle.js:5427drainMicroTaskQueue @ bundle.js:5434ZoneTask.invoke @ bundle.js:5366
VM8530:27 Error: Uncaught (in promise): Error: Cannot match any routes: 'welcome2'
at resolvePromise (bundle.js:5478)
at bundle.js:5455
at ZoneDelegate.invoke (bundle.js:5263)
at Object.onInvoke (bundle.js:19249)
at ZoneDelegate.invoke (bundle.js:5262)
at Zone.run (bundle.js:5156)
at bundle.js:5511
at ZoneDelegate.invokeTask (bundle.js:5296)
at Object.onInvokeTask (bundle.js:19240)
at ZoneDelegate.invokeTask (bundle.js:5295)window.console.error @ VM8530:27BrowserDomAdapter.logError @ bundle.js:50349ExceptionHandler.call @ bundle.js:11346(anonymous function) @ bundle.js:14458schedulerFn @ bundle.js:14747SafeSubscriber.__tryOrUnsub @ bundle.js:15377SafeSubscriber.next @ bundle.js:15326Subscriber._next @ bundle.js:15279Subscriber.next @ bundle.js:15243Subject.next @ bundle.js:14835EventEmitter.emit @ bundle.js:14735onError @ bundle.js:19058onHandleError @ bundle.js:19270ZoneDelegate.handleError @ bundle.js:5267Zone.runGuarded @ bundle.js:5173_loop_1 @ bundle.js:5427drainMicroTaskQueue @ bundle.js:5434ZoneTask.invoke @ bundle.js:5366
VM8530:27 Unhandled Promise rejection: Cannot match any routes: 'welcome2' ; Zone: angular ; Task: Promise.then ; Value: Error: Cannot match any routes: 'welcome2'(…)window.console.error @ VM8530:27consoleError @ bundle.js:5401_loop_1 @ bundle.js:5430drainMicroTaskQueue @ bundle.js:5434ZoneTask.invoke @ bundle.js:5366
VM8530:27 Error: Uncaught (in promise): Error: Cannot match any routes: 'welcome2'(…)window.console.error @ VM8530:27consoleError @ bundle.js:5403_loop_1 @ bundle.js:5430drainMicroTaskQueue @ bundle.js:5434ZoneTask.invoke @ bundle.js:5366

我错过了什么？

谢谢！

更新

根据 google 搜索，我发现了一些关于旧版本 angular2 的响应，因此我尝试使用以下代码将它们采用到新版本中：

export const routes:RouterConfig = [
    { path: "",redirectTo:"welcome",pathMatch:"full"},
    { path: "welcome", component: WelcomeComponent },
    { path: "help",component: HelpComponent},
    { path: "*",redirectTo:"welcome"}
];

但是结果完全一样

Answer 1

新路由器使用“**”而不是单个“*”

export const routes:RouterConfig = [
    { path: "",redirectTo:"welcome",pathMatch:"full"},
    { path: "welcome", component: WelcomeComponent },
    { path: "help",component: HelpComponent},
    { path: "**",redirectTo:"welcome"}
];

使用 angular2 rc4 将所有无效 url 重定向到特定组件

redirect all invalid urls to a specific component with angular2 rc4

typescript

angular-routing

angular

更新