I was developing a web application in Angular 2, its working fine in my localhost, but when i hosted in production environment its not working my sub-domain is replacing with empty string
My production server is http://foobar:8888/Hrms
where "Hrms" is sub-domain that is where i hosted my "publish files"
when i run in local the url was : http://localhost:50739/#/access/login and in server the sub-domain missing automatically : http://foobar:8888/#/
i tried http://foobar:8888/hrms/#/access/login but it still going to http://foobar:8888/#/ automatically
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 { }
Please let me know, when did i do wrong Thanks.
Routing in Angular allows the users to create a single-page application with multiple views and allows navigation between them. Users can switch between these views without losing the application state and properties.
HashLocationStrategylink. A LocationStrategy used to configure the Location service to represent its state in the hash fragment of the browser's URL.
You have to change your base tag
in your index.html
file:
<base href="/">
to <base href="/hrms">
This tag is used by angular router to know where is the base of every route, that's why it's not working in production while it works in dev.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With