我在golang中有很多代码，需要将它们用作Angular2(Typescript)Web应用程序的服务。因此，我尝试使用golang代替Node.js作为后端。我基本上已经按照那里的每一个教程，似乎没有一个帮助我。
这是我的golang多路复用器(我尝试使用net/http，现在使用 gorilla /多路复用器):
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用作 bundle 程序，但是它也有问题。
我已经为此付出了太多的时间，我一直在竭尽全力，我可以使用您能给我的任何帮助。
谢谢!
最佳答案
经过大量诅咒后找到了解决方案。
我用this very barebones starter for a webpack。它比AngularClass最受欢迎的版本要好得多。它有点过时了，但是您应该可以弄清楚。
您需要做的一件事就是构建，因此请确保在package.json中包含以下内容:
"build": "rimraf dist && webpack --config config/webpack.dev.js --progress --profile --bail"
为了获得运行的go代码，我查看并修改了this code.
我必须为其他类型添加其他处理。
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)
我的问题来自以下事实:我发现的许多来源都说，让Go托管应用程序所需要做的就是将其指向index.html。这些消息来源忽略了您必须拥有一个webpack才能做到这一点。因此， future 的Google员工可以从我的错误中吸取教训。