角2前端，Golang后端
角2前端，Golang后端
提问于 2016-10-06 14:54:15
我有很多在戈朗的代码，我需要用来作为Angular2 (打字本)网络应用程序的服务。因此，我试图使用golang作为我的后端，而不是Nodejs。我基本上遵守了所有的教程，似乎没有一个能帮到我。
下面是我对golang的mux (我尝试过使用net/http，现在我使用的是大猩猩/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)
}这是我的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>目前，我的应用程序的结构是：
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 当我在chrome中运行这个程序时，在我的app.component.ts的转置版本上会出现一个错误。
TypeError: core_1.Component is not a function我试过用webpack当我的发球手，但这也有问题。
我把头撞在这上面已经太久了，你能帮我什么都行。
谢谢!
回答 1
Stack Overflow用户
回答已采纳
发布于 2016-10-06 23:33:37
在诅咒之后找到了解决办法。我用的是这是webpack最朴素的开场白。它的效果比AngularClass更受欢迎的要好得多。有点过时了，但你应该能搞清楚。
您需要的一件事是构建，所以请确保您的package.json中有这样的内容：
"build": "rimraf dist && webpack --config config/webpack.dev.js --progress --profile --bail"为了获得运行它的go代码，我查看并修改了这个密码。
我不得不为其他类型添加额外的处理。
围棋代码的结果如下：
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)我的问题来自于这样一个事实:我发现的很多消息来源都说，要想托管这个应用程序，你所要做的就是把它指向index.html。那些消息人士忘了说你必须有webpack才能这么做。所以未来的谷歌人，从我的错误中吸取教训。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/39899257
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号