Salesforce with AngularJS - script resources not loading correctly from staticresource

Question

<apex:page applyBodyTag="false" docType="html-5.0" showHeader="false" standardStylesheets="false">

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.13/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.js"></script>

<!-- ContactMatchApp scripts -->
<apex:includeScript value="{!URLFOR($Resource.ContactMatchSPA, '/app.js')}" />
<apex:includeScript value="{!URLFOR($Resource.ContactMatchSPA, 'app/eb/ebcontroller.js')}" />


<apex:remoteObjects jsNamespace="test" >
    <apex:remoteObjectModel name="Contact" jsShorthand="ContactGateWay" fields="Name,Id,Email, AccountId"> 

    </apex:remoteObjectModel>
</apex:remoteObjects>
<div ng-app="app">
    <h1> Contact Match </h1>
    {{5 + 4}}
    <div ng-view="ng-view">

    </div>    

</div>

I'm writing some basic Angular app with Salesforce and running into an issue where the app is failing to load the script resource.

Below is what I get in the page-source,

When I see it in developer console, I'm getting an GET error (404)

GET https://c.cs60.visual.force.com/resource/1482702320000/ContactMatchSPA/app.js

Whereas app.js is loaded in static resource under the ContactMatchSPA?

What am I missing?

Answer 1

Can you check the AngularJS version? I would suggest to download it from Angularjs website and create the static resource by uploading the minified and other JS scripts. The full ZIP contains. And then reference from there as you did in your code. We did the same on our project and did not encounter any issue.

One of the substantial reason of this because Google regularly updates the language and some methods and variables or properties getting changed every day.

Change these two lines;

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.13/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.js"></script>