路由在生产中不起作用

Question

我在 Angular 2 中开发了一个 Web 应用程序，它在我的本地主机上运行良好，但是当我在生产环境中托管时它无法运行我的子域正在替换为空字符串

其中 "Hrms" 是我托管 "publish files"

的子域

当我运行在本地 url 是：http://localhost:50739/#/access/login 并且在服务器中子域自动丢失：http://foobar:8888/#/

我尝试了 http://foobar:8888/hrms/#/access/login 但它仍然会 http://foobar:8888/#/自动

代码

var domainName = "";
if (location.hostname !== "localhost")
    domainName = "HRMS/";

const appRoutes: Routes = [
{
    path: "access", component: AccessComponent,
    children: [
        { path: "", redirectTo: "login", pathMatch: "full" },
        { path: domainName + "login", component: LoginComponent, data: { title: "Login" }, canActivate: [UserGuard] },
        { path: domainName + "forgot-password", component: ForgotPasswordComponent, data: { title: "Forgot Password" }, canActivate: [UserGuard] },
        { path: domainName + "not-found", component: PageNotFoundComponent, data: { title: "Page Not Found" } },
        { path: domainName + "lock-me/:path", component: LockComponent, data: { title: "Locked" }, canActivate: [LockGuard] }
    ]
},
{
    path: "app", component: LayoutComponent,
    canActivate: [AuthGuard],
    children: [
        { path: "", redirectTo: "getting-started", pathMatch: "full" },
        { path: domainName + "dashboard", component: DashboardComponent, data: { title: "Dashboard" } },
        { path: domainName + "getting-started", component: GettingStartedComponent, data: { title: "Getting Started" } },
        { path: domainName + "accounts", component: AccountsComponent, data: { title: "Accounts" } },
        { path: domainName + "organization", component: OrganizationComponent, data: { title: "Organization" } },
        { path: domainName + "interviews", component: InterviewsComponent, data: { title: "Interviews" } }
    ]
},
    { path: "", redirectTo: domainName + "access/login", pathMatch: "full" },
    { path: "**", redirectTo: domainName + "access/not-found", pathMatch: "full" }
];

@NgModule({
    imports: [
        RouterModule.forRoot(appRoutes, { useHash: true })
    ],
    exports: [
        RouterModule
    ]
})
export class AppRouting { }

请告诉我，我什么时候做错了谢谢。

Answer 1

您必须在 index.html 文件中更改基础 tag：

<base href="/"> 到 <base href="/hrms">

这个标签被 angular 路由器用来知道每条路由的基础在哪里，这就是为什么它在开发中工作时在生产中不工作的原因。

Answer 2

正如@supamiu 所说，问题很可能出在 base href 中。但是，在生成生产工件时，不要在 index.html 中硬编码路径，而是使用标志 --base-href your_app_prefix。这样最终的索引文件将包含正确的基本 href，应用程序应该按预期工作。

Answer 3

构建时使用 --base-href 属性如下：

ng build --prod --base-href /hrms

路由在生产中不起作用

Routing not working in production

angular-routing

angular