Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Routing not working in production

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.

like image 835
Arjun Avatar asked May 23 '17 09:05

Arjun


People also ask

What is angular routing?

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.

What is hash location strategy in angular?

HashLocationStrategylink. A LocationStrategy used to configure the Location service to represent its state in the hash fragment of the browser's URL.


1 Answers

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.

like image 55
Supamiu Avatar answered Oct 08 '22 07:10

Supamiu