Routing arbeiten nicht in der Produktion

Question

Ich war in Angular 2 eine Web-Anwendung zu entwickeln, seine feine in meinem localhost funktioniert, aber wenn ich in der Produktionsumgebung gehostet seine nicht funktioniert meine Sub-Domain ist mit leeren String ersetzt

Meine Produktionsserver ist http://foobar:8888/Hrms

wo „Hrms“ Sub-Domäne ist, wo ich meine gehostet wird „veröffentlichen Dateien“

, wenn ich in lokalen laufen die uRL war: automatisch und in Server fehlt die Sub-Domain: http://foobar:8888/#/

ich versuchte http://foobar:8888/hrms/#/access/login aber es ist noch zu http://foobar:8888/#/ automatisch gehen

-Code

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 { } 

Bitte lassen ich weiß, wann habe ich wr gemacht ong Danke.

Answer 1

Sie haben Ihre Basis tag in Ihrer index.html Datei zu ändern:

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

Dieser Tag durch Winkel Router verwendet wird zu wissen, wo die Basis jeder Route ist, das ist, warum es nicht funktioniert in Produktion, während es in dev arbeitet.

Answer 2

Wie @supamiu sagte, ist das Problem wahrscheinlich in Base href. Anstatt jedoch einen Pfad in index.html zu codieren, verwenden Sie beim Generieren Ihrer Produktionsartefakte das Flag --base-href your_app_prefix. Auf diese Weise enthält die finale Indexdatei den korrekten Basis-href und die App sollte wie erwartet funktionieren.