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!
