Question

我已经浏览了网页，以便在手动输入网址（或页面刷新）时基本了解如何导航到Angular2中的特定组件。除了beta angular2实现差不多2年（Such as here）之外，我无法找到任何东西。我有一个使用node / express的简单角度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 { }

Answer 1

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

这在应用程序中导航时工作正常，但是当我刷新它时不起作用

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

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

Nagavate on localhost：3000：您的浏览器在/上执行GET请求，并将index.html返回给客户端。
然后角度开始并实现默认组件IndexComponent
然后，您点击指向localhost：3000 / login
此处，没有请求您的服务器，angular只是设置正确的组件：LoginComponent
如果您刷新，您的浏览器会在localhost：3000 / login上发出GET请求，这会给您404，因为此路由不存在。

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

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

Answer 2

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

How to handle angular2 route path in Nodejs

Answer 3

您是否尝试将index.html部分放入<header>部分：

 <base href="/">

或有时也需要：

 <base href="/index.html">

Angular2服务器url导航

3 个答案: