如何为Angular等前端框架提供服务端脚本支持？

Hey Frank, let's unpack your confusion step by step—this is a super common hurdle when mixing Angular's dev server with PHP backend code, so you're not alone!

First, Why ng serve Can't Parse PHP #

The ng serve command spins up Angular's built-in development server, which only handles static assets like HTML, CSS, and JavaScript. It has no clue how to process PHP files, since those require a server-side interpreter (like Apache with PHP enabled). That's why your relative URL calls to PHP were failing—your Angular app is running on localhost:4200, but PHP needs a server that can execute its code.

What XAMPP Does (And Why It's a Good Suggestion) #

XAMPP is an all-in-one package that gives you a ready-to-use Apache web server, PHP interpreter, and MySQL database (if you need it). It creates an environment where PHP files can be executed, and your Angular app can interact with them without cross-domain issues.

Two Ways to Use XAMPP with Your Angular 5 App #

Option 1: For Production/Full Deployment

If you're ready to test a complete build of your app:

• Run ng build in your Angular project directory. This compiles your app into static files and saves them in the dist folder.
  • For ongoing development (auto-rebuild when you change code), use ng build --watch instead.
• Copy all files from the dist folder into XAMPP's htdocs directory (usually located at C:\xampp\htdocs on Windows, or /Applications/XAMPP/htdocs on Mac). You can create a subfolder here, like htdocs/my-angular-app, to keep things organized.
• Place your PHP server files in the htdocs directory too—for example, create an api subfolder at htdocs/api and put your .php files there.
• Start XAMPP's Apache service via the XAMPP control panel.
• Visit http://localhost/my-angular-app in your browser. Now your Angular app and PHP files are on the same domain (localhost), so relative URLs like ./api/my-service.php will work, and Apache will parse the PHP code correctly.

Option 2: For Development (No Full Build Needed)

If you want to keep using ng serve for live reloads while still testing PHP calls, use Angular's proxy configuration:

• Create a file named proxy.conf.json in your Angular project root with this content:

  {
    "/api/*": {
      "target": "http://localhost",
      "secure": false,
      "changeOrigin": true
    }
  }
  

• Start your Angular dev server with the proxy flag: ng serve --open --proxy-config proxy.conf.json.
• Make sure your PHP files are in XAMPP's htdocs/api folder, and Apache is running.
• Now, when your Angular app makes a request to /api/my-service.php, the proxy will forward that request to http://localhost/api/my-service.php (XAMPP's server), which parses the PHP and sends back the response. This avoids cross-domain errors and lets you use live reloads like normal.

Quick Recap #

• ng serve is for static Angular dev only—no PHP support.
• XAMPP provides the server environment to run PHP.
• Use the build + copy method for full testing/deployment, or the proxy method for seamless development.

内容的提问来源于stack exchange，提问作者Frank