Angular2服务器网址导航答案

【问题标题】：Angular2 server url navigationAngular2服务器网址导航
【发布时间】：2017-01-08 00:05:21
【问题描述】：

我已经在网上搜索了关于如何在手动输入 url（或页面刷新）时导航到 Angular2 中的特定组件的基本了解。除了将近 2 年的 beta angular2 实现（Such as here）之外，我找不到任何东西。我有一个使用 node/express 的简单 Angular Web 应用程序。让客户端导航工作正常，但让客户端处理服务器请求我不确定这是如何工作的，甚至不确定如何实现。谁能帮忙。

我只是在做： http://localhost:3000/login - 在应用程序中导航时效果很好，但是当我刷新时它不起作用。我认为关于如何简单地实现这一点会有大量资源，但我没有找到基本的东西。谢谢！

main.ts:

    import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { LocationStrategy, HashLocationStrategy } from '@angular/common';
import { AppModule } from './app.module';

platformBrowserDynamic().bootstrapModule(AppModule);

app.module.ts:

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouterModule }   from '@angular/router';

import { AppComponent }  from './components/app.component';

import { LoginComponent } from './components/auth/login';
import { IndexComponent } from './components/home/index';

import { PageNotFoundComponent }   from './components/not-found.component';


@NgModule({
  imports:      [ BrowserModule,
  RouterModule.forRoot([
  {
    path: 'login',
    component: LoginComponent
  },
  {
    path: '',
    component: IndexComponent
  },
  { path: '**', component: PageNotFoundComponent }
])],
  declarations: [ AppComponent,IndexComponent,LoginComponent,PageNotFoundComponent ],
  providers: [  ],
  bootstrap:    [ AppComponent ]
})

export class AppModule { }

【问题讨论】：

标签： node.js angular angular2-routing angular2-template

【解决方案1】：

很高兴看到您的服务器的路由器定义。

在应用程序中导航时效果很好，但当我刷新时它不起作用

什么意思？您的服务器是否回复 404 状态码？

如果是这样，这就是正在发生的事情：

在 localhost:3000 上导航：您的浏览器在 / 上执行 GET 请求，并将 index.html 返回给客户端。
然后 Angular 启动并实例化您的默认组件 IndexComponent
然后，单击指向 localhost:3000/login 的链接
在这里，没有向您的服务器发出请求，角度只是实例化正确的组件：LoginComponent
如果您刷新，您的浏览器会在 localhost:3000/login 上发出 GET 请求，这会给您一个 404，因为此路由不存在。

要解决您的问题，请使用通配符来提供您的文件：

app.get('*', (req, res) => {
  res.status(200).sendFile(indexFile);
});

【讨论】：

【解决方案2】：

您必须让所有请求都返回包含根 Angular2 应用标记的视图。然后，无论您的 URL 是什么，它都会加载相同的视图，并让 Angular2 处理路由。

How to handle angular2 route path in Nodejs

【讨论】：

【解决方案3】：

您是否尝试在<header> 部分中输入您的index.html，例如：

 <base href="/">

或者有时它也需要：

 <base href="/index.html">

【讨论】：