duanmao7553 2016-10-06 14:54
浏览 93
已采纳

Angular 2前端,Golang后端

I've got a lot of code in golang that I need to use as services for an Angular2 (Typescript) web app. So I'm trying to use golang as my backend instead of Nodejs. I've followed basically every tutorial out there and none seem to help me.

Here's is my mux for golang (I've tried using net/http and now I'm using gorilla/mux):

func AngularAnnotations(w http.ResponseWriter, r *http.Request) {
    file := r.URL.Path[len("/@angular/") : len(r.URL.Path)-1]
    http.FileServer(http.Dir("frontend/mode_modules/@angular/" + file + "/src/" + file + ".js"))
}

func main() {
    r := mux.NewRouter()

    r.PathPrefix("node_modules/").Handler(http.StripPrefix("node_modules/", http.FileServer(http.Dir("frontend/node_modules"))))
    r.PathPrefix("/css/").Handler(http.StripPrefix("/css/", http.FileServer(http.Dir("frontend/css"))))
    r.PathPrefix("css/").Handler(http.StripPrefix("css/", http.FileServer(http.Dir("frontend/css"))))
    r.PathPrefix("/node_modules/").Handler(http.StripPrefix("/node_modules/", http.FileServer(http.Dir("frontend/node_modules"))))
    r.PathPrefix("/app/").Handler(http.StripPrefix("/app/", http.FileServer(http.Dir("frontend/app"))))
    r.PathPrefix("/typings/").Handler(http.StripPrefix("/typings/", http.FileServer(http.Dir("frontend/typings"))))
    r.PathPrefix("app/").Handler(http.StripPrefix("app/", http.FileServer(http.Dir("frontend/app"))))
    r.PathPrefix("typings/").Handler(http.StripPrefix("typings/", http.FileServer(http.Dir("frontend/typings"))))
    r.PathPrefix("/@angular/").HandlerFunc(AngularAnnotations)
    r.PathPrefix("systemjs.config.js").HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
        http.ServeFile(w, r, "./frontend/systemjs.config.js")
    })
    r.PathPrefix("/systemjs.config.js").HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
        http.ServeFile(w, r, "./frontend/systemjs.config.js")
    })
    r.HandleFunc("/{_:.*}", func(w http.ResponseWriter, r *http.Request) {
        http.ServeFile(w, r, "frontend/index.html")
    })
    http.ListenAndServe(":8000", r)
}

And here is my index.html:

<html>
  <head>
    <script>document.write('<base href="' + document.location + '" />');    </script>
    <base href="/">
    <title>Angular QuickStart</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <script src="css/styles.css" type="text/css"></script>
    <!-- 1. Load libraries -->
     <!-- Polyfill(s) for older browsers -->
    <script src="node_modules/core-js/client/shim.min.js"></script>
    <script src="node_modules/zone.js/dist/zone.js"></script>
    <script src="node_modules/reflect-metadata/Reflect.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>
    <!-- 2. Configure SystemJS -->
    <script src="systemjs.config.js"></script> 
   <script src="node_modules/es6-shim/es6-shim.min.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>
    <script src="node_modules/typescript/lib/typescript.js"></script>
    <script src="node_modules/rxjs/bundles/Rx.js"></script>

    <script>
      System.config({
         map: {
        rxjs: 'node_modules/rxjs' // added this map section,

    },
        transpiler: 'typescript', 
        typescriptOptions: { emitDecoratorMetadata: true }, 
        packages: {'app': {defaultExtension: 'ts'},'rxjs': {defaultExtension: 'js'}} 
      });
      System.import('app/components/main')
            .then(null, console.error.bind(console));
    </script>
  </head>
  <!-- 3. Display the application -->
  <body>
    <my-app>Loading...</my-app>
  </body>
</html>

Currently, the structure of my app is:

frontend
    +css
        +styles.css
    +node_modules
    +typings
    +app
        +components
            +models
                -common.ts (.js, .js.map)
                -foo.ts (.js, .js.map)
                -bar.ts (.js, .js.map)
            +foo-details
                -foo-details.component.css
                -foo-details.component.html
                -foo-details.component.ts (.js, .js.map)
            +foo-sections
                -foo-sections.component.css
                -foo-sections.component.html
                -foo-sections.component.ts (.js, .js.map)
            +foo-section-details
                -foo-section-details.component.css
                -foo-section-details.component.html
                -foo-section-details.component.ts (.js, .js.map)
            +bar-details
                -etc
            +bar-sections
                -etc
            +bar-section-details
                -etc
            -app.component.css
            -app.component.ts (.js, .js.map)
            -app.module.ts (.js, .js.map)
            -main.ts (.js, .js.map)
        +services
            -golang.service.ts (.js, .js.map)
            -in-memory-data.service.ts (.js, .js.map)
            -foo-search.service.ts (.js, .js.map)
            -foo-sections.service.ts (.js, .js.map)
            -foo.service.ts (.js, .js.map)
            -bar-sections.service.ts (.js, .js.map)
            -bar.service.ts (.js, .js.map)
        -app.routing.ts (.js, .js.map)
        -rxjs-extensions.ts (.js, .js.map)
    -index.html
    -package.json
    -systemjs.config.js
    -tsconfig.json
    -typings.json
+controllers (golang)
+models (golang)
+routers (golang)
-main.go 

When I run this in chrome, I get an error on the transpiled version of my app.component.ts.

TypeError: core_1.Component is not a function

I've tried using webpack as my bundler, but it's having problems as well.

I've been banging my head against this for too bloody long, and I could use any help you can give me.

Thanks!

  • 写回答

1条回答 默认 最新

  • dtt78245 2016-10-06 23:33
    关注

    Found the solution after much cursing. I used this very barebones starter for a webpack. It worked much better than the more popular one by AngularClass. It's a bit out of date, but you should be able to figure it out.

    One thing you'll need is the build, so ensure you have this in your package.json:

    "build": "rimraf dist && webpack --config config/webpack.dev.js --progress --profile --bail"
    

    To get the go code for it to run, I looked at and adapted this code.

    I had to add additional handling for other types.

    The go code turned out like this:

    r := mux.NewRouter()
    
    n := negroni.Classic()
    n.Use(gzip.Gzip(gzip.DefaultCompression))
    n.UseHandler(r)
    
    abspath, err := filepath.Abs("./frontend/dist")
    
    if err != nil {
        fmt.Print(err)
    }
    
    fs := http.Dir(abspath)
    r.PathPrefix("/mockdata").HandlerFunc(controllers.MockController)
    r.PathPrefix("/app").Handler(http.FileServer(http.Dir("./frontend/src")))
    r.PathPrefix("/models").Handler(http.FileServer(http.Dir("./frontend/src")))
    r.PathPrefix("/services").Handler(http.FileServer(http.Dir("./frontend/src")))
    r.PathPrefix("/node_modules").Handler(http.FileServer(http.Dir("./frontend")))
    
    r.PathPrefix("/").Handler(http.FileServer(fs))
    
    http.ListenAndServe(":3333", n)
    

    My problem came from the fact that many of the sources I found said all you have to do to have Go host the app is point it at the index.html. Those sources neglected to say that you had to have a webpack to do it. So future Googlers, learn from my mistake.

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题?