I work on a large node.js/Angular.js application. We use grunt to recompile public scripts and markup. Most of the time, I have no problems running the server locally. Every time I make changes, I run grunt dev, then start the server with npm start. If there's ever a problem with my code, grunt catches it and warns me about it before I start the server. However, every once in a while, I run my commands, refresh the page, and all of my dozens of scripts transfer as MIME type text/html instead of text/javascript, and the page loads nothing.
Uncaught SyntaxError: Unexpected token < app.js:1
Uncaught SyntaxError: Unexpected token < environment-provider.js:1
Uncaught SyntaxError: Unexpected token < promise-service.js:1
Resource interpreted as Script but transferred with MIME type text/html:"http://localhost:3083/components/underscore/underscore.js". (index):62
Uncaught SyntaxError: Unexpected token < underscore.js:1
Resource interpreted as Script but transferred with MIME type text/html:"http://localhost:3083/components/spinner-button/spinner-button.js". (index):64
Resource interpreted as Script but transferred with MIME type text/html: "http://localhost:3083/components/util/sa-util.js". (index):63
Uncaught SyntaxError: Unexpected token < sa-util.js:1
Uncaught SyntaxError: Unexpected token < spinner-button.js:1
Resource interpreted as Script but transferred with MIME type text/html: "http://localhost:3083/bower_components/sport-ng/deferred/deferred-directive.js". (index):68
Resource interpreted as Script but transferred with MIME type text/html: "http://localhost:3083/bower_components/sport-ng/datepicker/datepickerDirective.js". (index):69
Resource interpreted as Script but transferred with MIME type text/html: "http://localhost:3083/bower_components/sport-ng/alerts/alertsService.js". (index):66
Uncaught SyntaxError: Unexpected token < alertsService.js:1
Resource interpreted as Script but transferred with MIME type text/html: "http://localhost:3083/bower_components/sport-ng/confirmDelete/confirmDeleteService.js". (index):67
When I open one of these script files in Chrome development tools, it shows me whatever is in my public/layout.html file. This problem persists for a while (usually the rest of the day), and I avoid it by switching to a new directory and recloning from github. When I switch back to that directory later, the problem is usually gone. Recently, I've grown more desperate. The problem is somehow following me between directories now, and I don't understand what's triggering this or how to stop it. Adding type="text/javascript" to my script tags doesn't seem to help, and I can't seem to recreate the problem. From the little I've been able to dig up on forums, it seems like it's an Angular problem.
The node.js framework that we're using to organize the app and serve files is Nokomis. The layout file is dynamically generated by grunt to include a set of modules that this app uses. Grunt only updates the paths to those modules, though. The rest of the Angular files are served with simple script references.
<script src="/components/environment/environment-provider.js"></script>
<script src="/components/promise/promise-service.js"></script>
<script src="/components/underscore/underscore.js"></script>
<script src="/components/util/sa-util.js"></script>
<script src="/components/spinner-button/spinner-button.js"></script>
From the package.json:
"grunt": "0.4.1",
"grunt-contrib-clean": "^0.5.0",
"grunt-contrib-compass": ">=0.1.3",
"grunt-contrib-copy": "0.4.x",
"grunt-contrib-jshint": "0.7.x",
"grunt-contrib-watch": "0.2.x",
"grunt-exec": "0.4.x",
...
"engines": {
"node": ">=0.8.0",
"npm": ">=1.1.21"
},
Does anyone have advice for how to fix or prevent this problem?