.Net Core with Angular 4 : 404 error when I refresh the browser

Question

I have built an angular 4 application with .Net core 2.0, visual studio 2017, and deployed to production server on IIS web server. The routing is working fine on localhost when refresh,but not working on live. I saw some answers in stackoverflow for IIS in web.config file. But I don't have web.config file under my project structure. can I add it manually or how can I fix it.

     <system.webServer>
  <rewrite>
<rules> 
  <rule name="Main Rule" stopProcessing="true">
    <match url=".*" />
    <conditions logicalGrouping="MatchAll">
      <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
      <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
    </conditions>
    <action type="Rewrite" url="/" />
  </rule>
</rules>

Here is my app.routing file

   const appRoutes: Routes = [
  { path: '', redirectTo: 'admin-dashboard', pathMatch: 'full' },
  { path: 'login', component: LoginComponent },
  { path: 'forgotpassword', component: ForgotPasswordComponent },
  { path: 'user-dashboard', component: DashboardComponent, canActivate: [AuthGuard] },
 { path: 'notifications', component: NotificationsComponent, canActivate: [AuthGuard] },
 {
path: 'admin-dashboard', component: AdminDashboardComponent, canActivate: [AuthGuard],
children: [
  { path: '', component: ChairmanMessagesComponent, canActivate: [AuthGuard]},
  { path: 'quotes', component: QuotesComponent, canActivate: [AuthGuard] },
  { path: 'users', component: UsersComponent, canActivate: [AuthGuard] },
  { path: 'notifications', component: AdminNotificationsComponent, canActivate: [AuthGuard] },
]

}, ];

 export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);

Please kindly let me know.

Hi.. i have the same Issue.. did you resolved this it? – liron Jun 25 '20 at 04:58 — liron, Jun 25 '20 at 04:58

score 2 · Answer 1 · answered Apr 03 '18 at 18:09

In back-end (server side) just map all (404) error/unrecognized requests to your index (which includes all angular build scripts).then it returns the index. In front-end, u can get what u need.It maps to the page which u need.

eg:- In spring Boot back-end this is an example answer

score 1 · Answer 2 · answered Jul 25 '18 at 19:51

I had the same problem when refreshing the browser on a route like: /users I fixed it by creating a folder called: users and inside a file: index.html

<!<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>redirect users</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script>
        window.location.href = 'http://my-server:4200/';
    </script>
</head>
<body>    
</body>
</html>

.Net Core with Angular 4 : 404 error when I refresh the browser

3 Answers3

Linked