Serving angularjs routes go-lang

Question

I'm using the following code to server an Angular app.

package main

import (
    "github.com/gorilla/mux"
    "log"
    "net/http"
)

func main() {
    r := mux.NewRouter()
    r.PathPrefix("/portals/").Handler(http.StripPrefix("/portals/", http.FileServer(http.Dir("./portals/"))))
    r.PathPrefix("/dependencies/").Handler(http.StripPrefix("/dependencies/", http.FileServer(http.Dir("./dependencies/"))))
    r.HandleFunc("/registeruser", UserRegistrationHandler)
    r.HandleFunc("/deleteuser/{username}", DeleteUserHandler)
    http.Handle("/", r)

    log.Println("Listening...")
    http.ListenAndServe(":8000", r)
}

If I navigate to http://localhost:8000/portals/ it's able to render the site correctly with all the dependencies.But http://localhost:8000/portals fails with 404 Not Found.

Similarly if I navigate to http://localhost:8000/portals/#login it works as expected.But if I navigate to http://localhost:8000/portals/login it gives 404.

Another thing I noticed is http://localhost:8000/portals/login url works if I navigate to it via a link inside the app(say login link). But if I type the url in the browser and hit enter it gives a 404.

What would be the missing part here?Am I handling the static content wrongly?

Answer 1

You need to enable html5mode in angularjs

Answer 2

The "static" is the folder in root project, with your files angular built, this will router to folder "static" when you call "http://localhost:4200" or when not find a router.

When you use "#" in your angular router (http://localhost:4200/#/test), the browser will make a request "http://localhost" without "test" path, because "test" if a route using by angular and never arriver at server.

But when you don't use "#" in angular path, the browser will request all URL http://localhost:4200/#/test to server, but there aren't this route "/test" in your server, so the serve return 404.

To avoid this you need to return the "static" content to any route that you are requesting, then the server will return the angular files and the browser will find the "test" angular router and show.

  func server() {
   router := gin.Default()
   router.Static("/", "./static")    //folder with angular files build
   router.NoRoute(func(c *gin.Context) {
      c.File("./static/index.html")  //if router not find will same
   })
   router.Run(":4200")
 }

you can build your angular files with this, don't skill "--base-href=/" because this is type of "#" to indicate what is the angular router data:

ng build project-test1 --configuration --base-href=/ --output-path="../static"

You need configurate the angular without "#" in router.

@NgModule({
  imports: [
    BrowserModule,
    RouterModule.forRoot({useHash: false, relativeLinkResolution: 'legacy'})
  ],
  providers: [
   {provide: LocationStrategy, useClass:PathLocationStrategy},
  ],
  bootstrap: [SeiComponent]
})
export class SeiModule { } //main module fron angular "app"