Angular 2.0 深层链接不起作用。与地址栏相同

Question

当我在应用程序中构建和导航 link 时一切正常，但在地址栏中输入却不行！最终我希望能够通过电子邮件将 link 发送到特定应用程序 page/path，但我不确定如何实现。

我已经关注了angular router guide documentation。我认为正确...

我正在使用 NodeJS（带 express）并且在服务器中我已将所有流量重定向到应用根目录。

app.get("*", function(req, res) {
    console.error("in get *")
    res.redirect("/");
});

在我的 index.html 我设置了 base

<base href="/">

我的客户端routs/paths设置如下

const appRoutes: Routes = [
  { path: 'vendor/registration', component: VendorRegistrationComponent },
  { path: 'vendors', component: VendorListComponent },
  { path: '',  redirectTo: 'vendor/registration', pathMatch: 'full' },
  { path: '**', component: PageNotFoundComponent }    
];

如果我在浏览器地址栏中键入 http://localhost:8080/vendors，我会进入 http://localhost:8080/vendor/registration，这是有道理的，因为这是服务器告诉浏览器重定向到的位置。

那我应该如何深入 link 我的应用程序？

编辑。 Angular 教程 - "TOUR OF HEROES" - 也表现出相同的行为。即直接在浏览器的地址栏中输入 url 是行不通的。该应用程序显示 "loading..." 文本并且不会路由到控制器。

Answer 1

通常您不需要在服务器上重定向，因为您的所有路由都由客户端上的 angular 路由器处理。

相反，让您的包罗万象的快速路线始终为您的 index.html 提供所有请求的 url。当客户端应用程序启动时，angular 将根据请求的 url 负责路由到适当的组件。确保保留您的 <base href="/"> 标记，以便 angular 可以知道 url 的哪一部分被路由。

const path = require('path');

app.get("*", function(req, res) {
    res.sendFile(path.join(__dirname, '/path/to/your/index.html'));
});

Answer 2

angular2 documentation

中明确描述了对您问题的回答

Angular 2.0 深层链接不起作用。与地址栏相同

Angular 2.0 deep-linking does not work. Same from the address bar

routing

deep-linking

node.js

angular