0

I have the following routing in the angular2 app: 

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

Recently I had to add bs-config.js with the following content:

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

Everything works fine, except accessing 404 pages, i.e. if the user types in the wrong link I just see "Cannot GET /url" and nothing interesting in logs. If I remove just these three lines:

        middleware: {
            1: apiProxy
        },

It starts to work again and I get 404 page on http://myapp/some/broken/url.

But I need the proxy for backend related stuff. Why it interferes with regular api paths even though it should proxy only 'api' like urls?

P.s. I am using:

"http-proxy-middleware": "^0.17.2",
"lite-server": "^2.2.2",
Vadim Kirilchuk
  • 3,532
  • 4
  • 32
  • 49

1 Answers1

1

Somehow fixed it by changing to:

    middleware: {
        1: apiProxy,
        2: require('connect-history-api-fallback')({index: '/index.html', verbose: false})
    },
Vadim Kirilchuk
  • 3,532
  • 4
  • 32
  • 49