0

In my app I created routes, they work perfectly on localhost, I can navigate to:

localhost:4200/about 

but when deployed on Production, if I navigate to:

myapp.com/about 

what will happen is, the browser would almost instantly rewrite the URL to: myapp.com/index.html and then right afterwards the final url I will see displayed in the navigation bar of the browser, will be the default path: "myapp.com/"

My routing code is:

const appRoutes: Routes = [ { path: "", redirectTo: "/", pathMatch: "full" }, { path: "about", component: AboutComponent }, { path: "**", redirectTo: "/" }, ]; @NgModule({ imports: [ RouterModule.forRoot(appRoutes) ], exports: [ RouterModule ] }) export class AppRoutingModule {} 

and I app module I also added, as I read it could help:

providers: [{provide: LocationStrategy, useClass: PathLocationStrategy}],

on the backEnd side (frontend and backend are in the same project) this is the code:

public void Configure( .... app.UseDefaultFiles(); app.UseSpaStaticFiles(); app.UseMvc(routes => { routes.MapRoute( name: "default", template: "{controller=Home}/{action=Index}/{id?}"); routes.MapSpaFallbackRoute("spa-fallback", new { controller = "Home", action = "Index" }); }); app.UseSpa(spa => { spa.Options.SourcePath = "FrontEnd"; if (env.IsDev()) { spa.UseAngularCliServer(npmScript: "start"); } }); 

the HomeController:

 public IActionResult Index() => Redirect("index.html"); 

the web.config file:

<configuration> <system.webServer> <handlers> <add name="aspNetCore" path="*" verb="*" modules="AspNetCoreModule" resourceType="Unspecified"/> </handlers> <aspNetCore processPath="%LAUNCHER_PATH%" arguments="%LAUNCHER_ARGS%" stdoutLogEnabled="false" stdoutLogFile=".\logs\stdout" forwardWindowsAuthToken="false"/> </system.webServer> </configuration> 

So basically whenever deployed, if I try to navigate to my route "/about", it will just rewrite to index.html and then redirect to "/"

Any ideas?

6
  • ng build --prod could you applied --prod flag when building you angular app? Commented Jan 27, 2021 at 9:33
  • yes I do, this is my docker command to build the image: "RUN npm run build -- --prod " Commented Jan 27, 2021 at 9:36
  • in the network tab from Chrome, when I try to reach my route, I see that the Get Request gets Error code 302, and then Index..html gets requested Commented Jan 27, 2021 at 9:41
  • { path: "", redirectTo: "/", pathMatch: "full" }, here, redirectTo:/ is not required. Commented Jan 27, 2021 at 9:51
  • removed it but same issue Commented Jan 27, 2021 at 10:17

1 Answer 1

1

This works for me but on an IIS server. Create a web.config file and place it in the root folder of Angular dist files.

 <?xml version="1.0" encoding="utf-8"?> <configuration> <system.webServer> <rewrite> <rules> <rule name="Angular Routes" 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="/frontend/" />//Folder with my Angular files </rule> </rules> </rewrite> </system.webServer> </configuration> 
Sign up to request clarification or add additional context in comments.

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.