loopbackからangular2へのリクエストを書き換えます（MIMEタイプ（ 'text/html'）が実行できないためスクリプトの実行を拒否しました）。

Question

ループバックをバックエンドAPIとして、angular2をフロントエンドとして使用しています。

私はangle2フロントエンドにもサービスするためにループバックを使用しています。

これはうまくいきますが、一度ページを更新するとループバックでは角度のジョブでループバックではないため、URLの処理方法はわかりません。

だから私はこのエラーを取得する：

私はこのエラーを取得する理由をループバックは私のindex.htmlをロードしたら、その後、angular2はブートストラップとのこれらのタイプを処理する方法を知っているされているので、私は、100％理解これは私のapp.routing.tsファイルで指定されているためです。しかし、このリンクに直接アクセスすると、angular2はブートストラップされず、ループバックはこのタイプのURLの処理方法を知らない。

私はループバックに使用する/ api以外のすべてのリクエストをリダイレクトするために、server.jsのループバックコードにコードを追加しました。

がここにコードされています

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; 
} 

これは動作しますが、しかし、index.htmlページがロードされていないと私は次のコンソールエラーを取得：

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. 

私は、エラーを理解しますが、なぜ私はこれを受け取っているのか分からず、これを修正する方法を知らない。

これは私のループバックのバックエンドのための私のmiddleware.jsonファイルです：

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

angular.io docsによると、 "アプリはindex.htmlをにフォールバックする必要がありますルーティング"。これは、ループバックが「GET」または404のタイプの結果にならない場合は、ループバックがURLを認識せず、angle2またはangular4アプリケーションのindex.htmlに「フォールバック」する必要があることを意味します。

これを修正するには、角度のルータがそこからループバックできるように、ループバックを角度インデックスにリダイレクトするカスタムミドルウェアを追加する必要があります。あなたのmiddleware.jsonファイル中のSO

、次のように変更します。

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

フルパスが/サーバ/ミドルウェアであるように、そして、/ /サーバ/ミドルウェア内のファイルcustom404.jsを追加/ custom404.js。ミドルウェアディレクトリが存在しない場合は作成します。

その後custom404.jsファイル内：

'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(); 
      } 
     }); 
    }; 
}; 

これはあなたの角度アプリ、まだループバックによって提供されながら正しくルートURLを意志の角度ルータに戻ってリダイレクトします。

重要

したがって、もはや私は上記開口部の質問に実行しようとしましたようserver.jsを経由してアプリをリダイレクトするために必要ありません！