我在golang中有很多代码需要用作Angular2（Typescript）Web应用程序的服务。所以我试图使用golang作为我的后端而不是Nodejs。我基本上都遵循了每一个教程，似乎没有人帮助我。
这是我的golang mux（我尝试过使用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作为我的捆绑包，但它也遇到了问题。
我长期以来一直在抨击我的头脑，我可以使用你能给我的任何帮助。
谢谢！
答案 0 :(得分：3)
经过多次诅咒后找到解决方案。 我用了this very barebones starter for a webpack。它比AngularClass更受欢迎的效果要好得多。它有点过时，但你应该能够弄清楚。
您需要的一件事是构建，所以请确保在package.json中有这个：
"build": "rimraf dist && webpack --config config/webpack.dev.js --progress --profile --bail"
要获取运行代码，我查看并修改了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才能做到这一点。所以未来的Google员工，要从错误中吸取教训。