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

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条回答

      报告相同问题?

      相关推荐 更多相似问题

      悬赏问题

      • ¥15 ABAQUS简单的带传动系统运转不了
      • ¥15 关于git actions自动部署的问题
      • ¥25 小程序 view wx:for 循环太多时,如何在循环结束执行某个事件?
      • ¥15 曲率模态差matlab程序计算
      • ¥15 大概算是比较简单的坐标系旋转问题
      • ¥15 关于#python#的问题:安装完gym环境后
      • ¥15 关于稳像云台姿态控制中相机姿态误差表征
      • ¥15 求sm16306s驱动例程
      • ¥15 本地生活媒体平台口碑选品怎么获得权限
      • ¥15 R语言 回归树/袋装树/随机森林预测