angular - Browser-sync&lite-server: http-proxy-middleware が存在しない URL をインターセプトする

Question

angular2 アプリに次のルーティングがあります。

/** Application routes */
const routes: Routes = [
    { path: '', component: LandingComponent },
    { path: 'about', component: AboutUsComponent },    
    // catch all path, should go after all defined paths
    { path: '**', component: PageNotFoundComponent }
];

bs-config.js最近、次の内容を追加する必要がありました。

var proxy = require('http-proxy-middleware');

// note: serving from both ./dist and ./node_modules
// TODO: https?

// redirect all /api calls to the backend
var apiProxy = proxy('/api', {
    target: 'http://localhost:8080',
    pathRewrite: {
        '^/api' : '',    // rewrite path 
    },
    changeOrigin: true  // for vhosted sites
});

module.exports = {
    files : "./dist/**/*.{js, html, css}",
    server: {
        baseDir : ["./dist","node_modules"],
        middleware: {
            1: apiProxy
        },
        https : false
    },
    logLevel: "debug"
};

404 ページへのアクセスを除いて、すべて正常に動作します。つまり、ユーザーが間違ったリンクを入力すると、「/url を取得できません」と表示され、ログに興味深いものは何も表示されません。この 3 行だけを削除すると、次のようになります。

        middleware: {
            1: apiProxy
        }, 

再び動作し始め、http://myapp/some/broken/urlに 404 ページが表示されます。

しかし、バックエンド関連のものにはプロキシが必要です。URLのような「api」のみをプロキシする必要があるにもかかわらず、通常のapiパスに干渉するのはなぜですか?

私が使用しているPS：

"http-proxy-middleware": "^0.17.2",
"lite-server": "^2.2.2",