I wrote an app in Angular2. Locally using the lite-server the app works perfectly. Now I have a Webhost where I can transfer files via ftp. I tried naively to transfer all files to the server and corrected some absolute paths hopping my app would be then be accessible on the server.
This doesn't work. You can actually see it not working here mypage. I then started to read on the web about this, where I didn't find as much as I hopped. I found some people saying you should only upload all js files and everything should work, which didn't work for me but maybe I did some stupid error.
Others explain processes using Gulp, Webpack, SystemJs... but when they do they explain it in a way I don't understand since I have no Idea about these things. It seems to me that those processes are also concerned about making the app smaller and more efficient, which I don't care at all, maybe in some future I will but now I just want it working as it does locally.
So what I'm really wondering here is, even though it was super easy to make an app which works locally, is it normal that it is this hard to deploy, is there so much more between working locally and on a server? Do I need to follow tutorials about Gulp, SystemJs,... ? Is it because Angular2 is not in Production now?
If the answer is a clear yes, which one do I need first, how do I start to learn these things?
I found several question on this site where the most relevant is How to deploy Angular 2 application developed in Typescript to production? but there are no answers which helped me.
I also tried the first answer in How to prepare release version with SystemJS and Gulp? but my complete lack of understanding SystemJs and Gulp stand in my way.
In another question I found this working example example on Github but I had no chance to compare my project with this one, I don't understand what should be as is in the example and what should I keep the way it is in my project, all my attempts ended in my app not working locally anymore or no improvement.
In your index.html you have these lines:
<script src="sse/test/bundle.js"></script>
<script>
System.import('sse/test/bundle.js')
.then(null, console.error.bind(console));
</script>
You are basically loading same file twice. bundle.js is packed as system bundle, and you're loading it correctly with first script tag. Once it's loaded, it's available to the SystemJS, you only need to call main module from there.
So, change import script to:
<script>
System.import('main')
.then(null, console.error.bind(console));
</script>
and app should work...