CODEWITHSUNDEEP
angularasp.net-core-2.0
sailaja m
sailaja m

Reputation: 129

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

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.

Upvotes: 2

Views: 3868

Answers (3)

mruanova
mruanova

Reputation: 7095

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>

other solutions that i have read:

1) make your server redirect to index.html on a 404 error.

2) make your apache or iis add /index.html at the end of every route path

Upvotes: 1

Asanka
Asanka

Reputation: 1648

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

Upvotes: 2

Irhad Ljubcic
Irhad Ljubcic

Reputation: 96

Routed apps must fallback to index.html so please look at this link and add config for IIS if that is what you are using,or edit your config here 

<action type="Rewrite" url="/index.html" />

Upvotes: 0

Related Questions