Check out our Angular Book Series.

How do I access Remote Services from the Angular CLI Dev Server?

I have been working on re-writing my Angular books for Angular 7. Along the way, I Decided it is time to finally ditch the build scripts for Angular that I wrote and move the text over to the Angular CLI. The Angular CLI has become a standard so it makes sense to base the books on that.

As part of this, I had to get the local dev server, localhost:4200, to load services from remote servers. I had to set this up for each separate service layer in the book. Thankfully Angular CLI includes proxy support for its server. That just means whenever the localhost:4200 makes a service request to a specific URL, I can redirect it to a different server where the real services lie.

When my UI code accesses:

localhost:4200/coldFusion

I want to redirect it to:

local10.angular.learn-with.com/coldFusion/A7

Coldfusion, Java, PHP, and NodeJS will not be running as part of the Angular CLI Dev server, so this allows me to keep services separate from the UI code, but still develop them together. For the purposes of this article, I'll show you how I set up the proxy for the ColdFusion services, however the same principles apply for whatever services you want to access.

Create the Proxy File

The first step is to create a proxy.conf.js file. First create a proxy-conf.js file and create a PROXY_CONFIG variable:


var PROXY_CONFIG = [{ }]
module.exports = PROXY_CONFIG;

The PROXY_CONFIG object is an array of different redirects. For this article, only one object is listed, which I'll use to define the redirect for the ColdFusion services.

Fist, I'll add the context:


context: [
"/coldFusion"
],

The context tells the server-side proxy to look for all calls to coldFusion and to process them. Next I'll add the target:


target: "http://local10.angular.learn-with.com",

The target tells us which server should be redirected to. Since I'm directing to a different server, I need to make sure to set the changeOrigin property to true:


changeOrigin: true,

You won't need this if your services also reside on localhost. Next set secure to false:


secure: false,

I never set up HTTPS certificates on my local environment for testing purposes, which is why this value is set to false.

Finally, I added a path re-write:


pathRewrite: {
"^": "http://local10.angular.learn-with.com/A7"
},

This is because a request to localhost:4200/coldFusion actually needs to redirect to http://local10.angular.learn-with.com/A7/coldfusion. The path rewrite rules affect this.

One thing that was very helpful when I was debugging this was setting the log level:


logLevel: "debug",

This provides a lot of details in the console. It took me some trial and error to get this working.

Tell Angular about the Config

Open up your angular.json file. Find projects.yourproject.architect.serve.options. It'll probably look something like this:


"options": {
"browserTarget": "lw:build",
},

Add a proxyConfig value to this options object so that Angular CLI knows to load the proxy config file:


"proxyConfig": "proxy.conf.js"

Now you can shut down your app, re-run ng serve and you should be good to go.

Comments (Comment Moderation is enabled. Your comment will not appear until approved.)
All Content Copyright 2005, 2006, 2007, 2008, 2009 Jeffry Houser. May not be reused without permission
BlogCFC was created by Raymond Camden. This blog is running version 5.9.2.002.