Routing doesn't work in production
I was developing a web application in Angular 2, it worked fine in my localhost, but when I put it in production, my subdomain replaces the empty string
My production server is http: // foobar: 8888 / Hrms
where "Hrms" is the subdomain where I posted my "file post"
when i run locally url was: http: // localhost: 50739 / # / access / login and the server will automatically have no subdomain: http: // foobar: 8888 / # /
I tried http: // foobar: 8888 / hrms / # / access / login but it will still be 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 I did wrong. Thanks.
source to share
As @supamiu said, the problem is most likely in the base href. But instead of hardcoding the path in index.html when you are producing production artifacts, use the -base-href your_app_prefix flag. This way the final index file will contain the correct href base and the application should work as expected.
source to share
check it out: https://blog.angularindepth.com/deploy-an-angular-application-to-iis-60a0897742e7
there is a section for creating web.config.
source to share