Requests von loopback in angular2 umschreiben (Skript wird nicht ausgeführt, da sein MIME-Typ ('text/html') nicht ausführbar ist)

Question

Ich verwende Loopback als Backend-API und angular2 als Frontend.

Ich benutze Loopback, um auch mein angular2-Frontend zu bedienen.

Das funktioniert gut, aber sobald ich eine Seite aktualisieren, weiß loopback nicht, wie mit der URL umzugehen ist, weil dies der Job von angular ist, nicht Loopback.

So bekomme ich diesen Fehler:

ich 100% verstehen, warum ich diesen Fehler, einmal weil Lasten meine index.html Loopback, dann ist angular2 Bootstrap und weiß, wie man diese Art von zu handhaben URLs, weil dies in meiner app.routing.ts-Datei angegeben ist. Wenn auf diese Verknüpfung jedoch direkt zugegriffen wird, wird angular2 nicht gestartet und Loopback kann nicht mit diesem URL-Typ umgehen.

Also habe ich Code in meinem Loopback-Code in server.js hinzugefügt, um alle Anfragen an angular außer/api umzuleiten, die ich für Loopback verwende.

Hier ist der 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 < array.length; i++) 
    if(string.startsWith(array[i])) 
     return true; 
    return false; 
} 

Dies funktioniert, jedoch ist die index.html Seite nicht geladen und ich erhalte die folgende Konsole Fehler:

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. 

ich den Fehler verstehen, aber Ich weiß nicht, warum ich das empfange und weiß nicht, wie ich das beheben soll.

Das ist meine middleware.json Datei für meinen Loopback-Backend:

{ 
    "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": {} 
    } 
} 

Answer 1

Nach angular.io docs, "Routed Apps index.html Rückfall muss". Dies bedeutet, dass, wenn Loopback nicht "GET" erhalten oder zu irgendeiner Art von 404 führen kann, dies bedeutet, dass Loopback die URL nicht versteht und "zurückfallen" muss zu index.html der App angular2 oder angular4.

Um dies zu beheben, müssen Sie eine benutzerdefinierte Middleware hinzufügen, um Loopback zu Ihrem Winkelindex umzuleiten, so dass der Router von angular es von dort übernehmen kann.

Also in Ihrer middleware.json Datei, die folgende ändern:

"final": { 
    "./middleware/custom404": {} 
    } 

dann eine Datei custom404.js inside/Server/Middleware/so dass der vollständige Pfad /server/Middleware/custom404.js. Wenn das Middleware-Verzeichnis nicht existiert, erstellen Sie es.

Dann in der custom404.js Datei:

'use strict'; 
module.exports = function() { 
    var path = require('path'); 
    return function urlNotFound(req, res, next) { 
     let angular_index = path.resolve('client/index.html'); 
     res.sendFile(angular_index, function (err) { 
      if (err) { 
       console.error(err); 
       res.status(err.status).end(); 
      } 
     }); 
    }; 
}; 

Dies wird zu Ihrem Winkel App umleiten zurück und Winkel Router leitet die URL korrekt, während immer noch von Loopback serviert.

Wichtige

Es ist daher nicht mehr erforderlich, um die App über server.js zu umleiten, wie ich oben in die Öffnung Frage zu tun versucht!