如何通过重写部署的应用程序中的URL使Angular 2路由器工作？

Question

我现在正在完成我的Angular 2应用程序,我想知道如何托管它.

我刚刚尝试在我的localhost上构建应用程序,实际上一切似乎都运行良好,期待Router应用程序.我无法通过重写URL来访问路由,因为它可能正在寻找一些文件和.htaccess RewriteRules,而不是routes.能够通过重写URL来访问路由对我来说很重要,因为我不希望[routerLink]我的管理面板和其他一些东西被公开(被视为超链接).

更具体一点......当我访问http://localhost/FinalApp/它时,使用路由器导航我,http://localhost/FinalApp/list/page/1以便list/page/1由Angular 2路由器添加.所有人[routerLink]都正常工作,并导航我到例如.http://localhost/FinalAll/list/category/3当我点击它们,但当我手动重写URL以进入管理面板(我正在添加admin到我的基础http://localhost/FinalApp/,所以最终的URL看起来像http://localhost/FinalApp/admin)它显示404错误(不是路由器的默认路由,但服务器 - 404).

我希望能够手动重写URL并使用Angular 2 Router.

我错过了什么或者它是不可能的？

Answer 1

这个问题通过实现HashLocationStrategy添加#到您的所有路由来解决:http://localhost/FinalApp/list/page/1变为http://localhost/#/FinalApp/list/page/1.您通过添加HashLocationStrategy到AppModule提供程序来实现此目的

{ provide: LocationStrategy, useClass: HashLocationStrategy }

您需要导入LocationStrategy和HashLocationStrategy从@angular/common:

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

如果您使用的是RC4或更低版本,请将其添加到您的bootstrap方法中:

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