title: Rewrite requests from loopback to angular2 (Refused to execute script because its MIME type ('text/html') is not executable)
body: <p>I am using loopback as a backend api and angular2 as a frontend.</p>
  
  <p>I am using loopback to also serve my angular2 frontend.</p>
  
  <p>This works fine, however, once I refresh a page, loopback does not know how to handle the url because this is angular's job, not loopback.</p>
  
  <p>So I get this error :</p>
  
  <p><a href="https://i.stack.imgur.com/l24KJ.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/l24KJ.jpg" alt="enter image description here"></a></p>
  
  <p>I understand 100% why I get this error, because once loopback loads my index.html, then angular2 is bootstrapped and knows how to handle those type of URLs because this is specified in my app.routing.ts file. However, when this link is directly accessed, angular2 is not bootstrapped and loopback does not know how to handle this type of URL.</p>
  
  <p>So I have added code in my loopback code in server.js to redirect all requests to angular except /api that I use for loopback.</p>
  
  <p>Here is the code :</p>
  
  <pre><code>var path = require('path');
  
  var ignoredPaths = ['/api'];
  
  app.all('/*', function(req, res, next) {
    //Redirecting to index only the requests that do not start with ignored paths
    if(!startsWith(req.url, ignoredPaths))
      res.sendFile('index.html', { root: path.resolve(__dirname, '..', 'client') });
    else
      next();
  });
  
  function startsWith(string, array) {
    for(let i = 0; i &lt; array.length; i++)
      if(string.startsWith(array[i]))
        return true;
    return false;
  }
  </code></pre>
  
  <p>This works, however, the index.html page is not loaded and I get the following console errors :</p>
  
  <pre><code>Refused to execute script from 
  
  'http://localhost:3000/inline.bundle.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.
  59074ce…:1 Refused to execute script from 'http://localhost:3000/polyfills.bundle.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.
  59074ce…:1 Refused to execute script from 'http://localhost:3000/scripts.bundle.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.
  59074ce…:1 Refused to execute script from 'http://localhost:3000/styles.bundle.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.
  59074ce…:1 Refused to execute script from 'http://localhost:3000/vendor.bundle.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.
  59074ce…:1 Refused to execute script from 'http://localhost:3000/main.bundle.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.
  </code></pre>
  
  <p>I understand the error, but dont know why i am receiving this and dont know how to fix this. </p>
  
  <p>This is my middleware.json file for my loopback backend:</p>
  
  <pre><code>{
    "initial:before": {
      "loopback#favicon": {}
    },
    "initial": {
      "compression": {},
      "cors": {
        "params": {
          "origin": true,
          "credentials": true,
          "maxAge": 86400
        }
      },
      "helmet#xssFilter": {},
      "helmet#frameguard": {
        "params": [
          "deny"
        ]
      },
      "helmet#hsts": {
        "params": {
          "maxAge": 0,
          "includeSubdomains": true
        }
      },
      "helmet#hidePoweredBy": {},
      "helmet#ieNoOpen": {},
      "helmet#noSniff": {},
      "helmet#noCache": {
        "enabled": false
      }
    },
    "session": {},
    "auth": {},
    "parse": {
      "body-parser#json": {},
      "body-parser#urlencoded": {"params": { "extended": true }}
    },
    "routes": {
      "loopback#rest": {
        "paths": [
          "${restApiRoot}"
        ]
      }
    },
    "files": {
      "loopback#static": {
        "params": "$!../client/"
      }
    },
    "final": {
      "loopback#urlNotFound": {}
    },
    "final:after": {
      "strong-error-handler": {}
    }
  }
  </code></pre>