我在 golang 中有很多代码需要用作 Angular2 (Typescript) 网络应用程序的服务。所以我尝试使用 golang 作为我的后端而不是 Nodejs。我基本上遵循了那里的所有教程，但似乎没有一个对我有帮助。
这是我的 golang 多路复用器(我试过使用 net/http，现在我正在使用 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)
}
这是我的 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 作为我的打包器，但它也有问题。
我已经为此苦苦思索了太久，我需要你能给我的任何帮助。
谢谢!
最佳答案
经过多次诅咒后找到了解决方案。 我用了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 员工，请从我的错误中吸取教训。
关于Angular 2 前端，Golang 后端，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39899257/