Skip to content

Latest commit

 

History

History
38 lines (26 loc) · 2.3 KB

README.md

File metadata and controls

38 lines (26 loc) · 2.3 KB

angular-proxy-bypass code demo

Intro

This code demo uses webpack's dev-server proxy bypass feature to return mocked HTTP responses.

The thing to note is that even though the bypass function is defined at the level of a proxy entry, when it's defined, it applies to all requests. I think this is a bug and even though the bug report for this has been closed, I don't think they implemented a fix or have any plans to do so. Furthermore, the webpack/webpack-dev-server#4827 PR seems to indicate that Webpack's dev-server plans to deprecate the bypass function:

Using the 'bypass' option is deprecated. Please use the 'router' and 'context' options. Read more at https://github.com/chimurai/http-proxy-middleware/tree/v2.0.6#http-proxy-middleware-options"

Note

Even with the comment given about bypass possibly becoming deprecated, I couldn't figure out how I could use router and context to provide similar functionality 🤷

How to run

  1. Go to the /code-demos/angular-proxy-bypass folder.
  2. Run npm i to install all the packages.
  3. Run npm start to start the app which will be available on http://localhost:4200.

Implementation details

This solution requires creating a proxy.conf.js file and using it as Angular's proxy configuration which is defined in the angular.json.

Since we can only define a single bypass function, we define a catch all proxy route /* and then use code to decide which mocked response to return based on the request url.

Warning

This solution is dependent on using Webpack as your bundler. See angular/angular-cli#25337.

Note

Angular's proxy feature is built on top of Webpack's dev-server proxy which makes use of the powerful http-proxy-middleware package. Check out its documentation for more advanced usages.

The bypass feature though, is a Webpack dev-server feature, not part of the http-proxy-middleware package.