title: Deploying Angular2 on Heroku yields 'Uncaught SyntaxError: Unexpected Token <' on all external references
body: <p>I'm trying to deploy an angular4 app on Heroku. But I get errors on all my <code>.js</code> references linked from my <code>.html</code>.</p>
  
  <p>The errors are as such  </p>
  
  <pre><code>16:29:54.613 myapp.herokuapp.com/:1 Resource interpreted as Stylesheet but transferred with MIME type text/html: "http://myapp.herokuapp.com/assets/style/bootstrap.css".
  16:29:54.646 jquery-1.10.2.min.js:1 Uncaught SyntaxError: Unexpected token &lt;
  16:29:54.647 myapp.herokuapp.com/:1 Resource interpreted as Stylesheet but transferred with MIME type text/html: "http://myapp.herokuapp.com/styles.d41d8cd98f00b204e980.bundle.css".
  16:29:54.685 bootstrap.min.js:1 Uncaught SyntaxError: Unexpected token &lt;
  16:29:54.743 jquery.bxslider.min.js:1 Uncaught SyntaxError: Unexpected token &lt;
  16:29:54.744 jquery.centralized.min.js:1 Uncaught SyntaxError: Unexpected token &lt;
  16:29:54.776 jquery.fixedonlater.min.js:1 Uncaught SyntaxError: Unexpected token &lt;
  16:29:54.865 jquery.hashloader.min.js:1 Uncaught SyntaxError: Unexpected token &lt;
  16:29:54.867 jquery.mixitup.min.js:1 Uncaught SyntaxError: Unexpected token &lt;
  16:29:54.868 jquery.nav.min.js:1 Uncaught SyntaxError: Unexpected token &lt;
  16:29:54.869 jquery.parallax-1.1.3.min.js:1 Uncaught SyntaxError: Unexpected token &lt;
  16:29:54.946 jquery.responsivevideos.min.js:1 Uncaught SyntaxError: Unexpected token &lt;
  16:29:54.947 jquery.scrollTo.min.js:1 Uncaught SyntaxError: Unexpected token &lt;
  16:29:54.948 jquery.tweet.min.js:1 Uncaught SyntaxError: Unexpected token &lt;
  16:29:54.999 jquery.tweetCarousel.min.js:1 Uncaught SyntaxError: Unexpected token &lt;
  16:29:55.001 holder.min.js:1 Uncaught SyntaxError: Unexpected token &lt;
  16:29:55.003 application.min.js:1 Uncaught SyntaxError: Unexpected token &lt;
  16:29:55.005 inline.230e19a62ca0cc6cf333.bundle.js:1 Uncaught SyntaxError: Unexpected token &lt;
  16:29:55.007 polyfills.2a6cee40ee8af30fbaec.bundle.js:1 Uncaught SyntaxError: Unexpected token &lt;
  16:29:55.018 vendor.20becde8ac8acd1f3058.bundle.js:1 Uncaught SyntaxError: Unexpected token &lt;
  16:29:55.019 main.f037d06044d7934ea073.bundle.js:1 Uncaught SyntaxError: Unexpected token &lt;
  </code></pre>
  
  <p>All these files exist in my <code>src/client/assets/js/</code> directory.</p>
  
  <p>My <code>server.js</code> is as such</p>
  
  <pre><code>const express = require('express');
  const path = require('path');
  
  const root = './dist/public';
  const pub = process.env.PUBLIC || `${root}`;
  const app = express();
  
  app.use(express.static(path.join(__dirname, 'dist/public/assets')));
  app.use(express.static(path.join(__dirname, 'dist/public')));
  
  app.get('/*', (req, res) =&gt; {
      res.sendFile(`index.html`, { root: pub });
  });
  
  const port = process.env.PORT || 3000;
  app.set('port', port);
  app.listen(port, () =&gt; console.log(`API running on localhost:${port}`));
  </code></pre>
  
  <p>Am I missing something? The app works just fine locally.</p>