I currently use Angular with ng-routes, ng-table and ng-animate. I also use other libraries such as jQuery and Modernizr. Finally I have my own custom javascript, which can be multiple files.
So my projects load a long list of resources like this:
<script type="text/javascript" src="/lib/jquery.min.js"></script>
<script type="text/javascript" src="/lib/modernizr.min.js></script>
<script type="text/javascript" src="/lib/angular.min.js"></script>
<script type="text/javascript" src="/lib/angular-route.min.js"></script>
<script type="text/javascript" src="/lib/angular-animate.min.js"></script>
<script type="text/javascript" src="/js/custom.js"></script>
I'm aware that I can speed up my projects by reducing HTTP calls and compressing all files.
I use CodeKit which gives options to import JS files into each other and compile them into a single compressed file. If I do that for the list above I would then simply load a single file like this:
<script type="text/javascript" src="/js/main.min.js"></script>
A single HTTP call rather than 6+, and all code is minified. The problem here is that the single file is 500kb+ and would be much larger on a complete project, possibly over 1mb.
The way I see it is it has to wait for that entire large file to load before it can do anything. Whereas if the files are separate, they can begin executing the script as soon as they each load.
Will this mean the file won't get cached by browsers because it's too large?
That depends on the browser. Desktop browsers shouldn't have any problems with this, however mobile will.
Will Angular or other libraries have any issues running when compiled in this format? (console throws errors if .map file is not in same directory)
Nope. the .map issues won't affect your end-user unless they open the console. This can also be fixed by your build process producing a .map file for the combined version.
Surely a 500kb+ file will still take a long time to load, so will this really improve load times?
Yes, because you're not passing cookies and http headers back and forth with each request.
However, there are things that you can do to improve load time. For example, I split my files into two categories:
Files that are needed immediately, and files that can be loaded later.
Unfortunately, you can't really make this distinction with angular without consequences because all routes need to be defined up front, along with all controllers and services required by said routes. The only thing you can really remove would be in-line templating because templates can be requested later via ajax.
I was able to make a split like this for one of my applications; I split the administration code and client code, and only included the administration code after successful admin login. This is inconvenient for admins because an admin can't go directly to an admin page and can't reload an admin page without having problems, but it did reduce load time for non-admin users.
This leaves you with only one real option: reduce the overall size of the content you are including. This means making controllers and services as reusable as possible, and not including code that isn't necessary. Looking at your example, you're including jQuery. jQuery's purpose is to make it easier to write ajax requests and select/manipulate DOM nodes, both of which are already covered by Angular. Therefore, you can reduce the size of your codebase by removing jQuery and instead using angular-based plugins.