手动粘贴URL时无法加载文件Angular 2路由？

我使这个路由配置手动粘贴URL时无法加载文件Angular 2路由？

@RouteConfig([ 
    { 
    path:'/profile/:id',name:'Profile',component:ProfileComponent 
    }, 
    // else 
    { 
    path: '/**', 
    redirectTo: ['Home'] 
    } 
])

和使用该导航资料与参数{ID：5}

<a [routerLink]="['Profile', {id:5}]" >Go </a>

我加入的index.html头此基础

<base href="/">

成功导航到

http://localhost:3000/profile/1

和工作的罚款

但是当我贴上相同的URL手册中的浏览器和命中进入它给我这个错误

错误会发生，因为文件并没有从加载根目录

http://localhost:3000

但浏览器试图加载它们形成相对URL目录

http://localhost:3000/profile/1

来源

2016-09-16 Amr Abdulaziz Ibrahim

我加入#我的路线，例如http://localhost:3000/#/profile/1解决了这个问题，你可以尝试这样做。尽管如此，有人可能会更好地解决这个问题。总之，我的解决办法是增加HashLocationStrategy到AppModule提供商：

{ provide: LocationStrategy, useClass: HashLocationStrategy }

当然，在这之前，你需要导入LocationStrategy和HashLocationStrategy：如果您使用的RC4或更低

import { LocationStrategy, HashLocationStrategy } from '@angular/common';

，添加此例如：

bootstrap(
AppComponent, 
    [ 
     { provide: LocationStrategy, useClass: HashLocationStrategy } 
    ]);

来源

2016-09-16 17:55:31

在那里我可以添加此 {提供：LocationStrategy，useClass：HashLocationStrategy} –

确定在bootstrap –

@amrabdulaziz我尽力解释，不能做得比这更好。 –

这很简单。

当刷新或手动在地址栏中复制粘贴URL，你需要有服务器端的配置（可能是服务器端的路由）（与PathLocationStrategy）确定并重定向到目标页面。

角路由是在客户端，如果你想要做同样的工作状态，你需要使用HashLocationStrategy

来源

2016-09-16 18:14:30 micronyks

感谢您的好解释 –

欢迎您！ – micronyks

手动粘贴URL时无法加载文件Angular 2路由？

回答

相关问题