Angular CLI proxy returns code from php script

I am writing an Angular app that calls php scripts hosted via xampp server. Instead of getting the response, the code from the script was returned instead.

I have setup the proxy as such:

// proxy.conf.json

{
  "/api/*": {
    "target": {
      "host": "localhost",
      "protocol": "https:",
      "port": 4433
    },
    "secure": false,
    "changeOrigin": true,
    "logLevel": "debug"
  }
}

Within another script, I could make a call to a php script using api/* path.

// test.service.ts (snippet)

@Injectable({
  providedIn: 'root'
})
export class DatabaseService {
    private httpOptions: Object = {
        headers: new HttpHeaders({
          'Content-Type': 'application/json'
        }),
        responseType: 'text'
     }

     getData(): Observable<any> {
         return this.http.get<any>('api/test-get.php', this.httpOptions)
             .pipe(
                 retry(1),
                 catchError(this.errorHandle)
             );
     }
}

The responseType was set to text because I am expecting a simple string from the script.

// test-get.php

<?php
  echo 'test';
?>

This script is located at api\test-get.php, relative to the root folder of the xampp server folder.

Issue now is that the response is printing out the code in test-get.php, instead of test. If I directly access https://localhost:4433/api/test-get.php, I would be able to see the echoed response.
I've read through some pages such as Angular-CLI proxy doesn't work, but I don't believe the issues are related to mine.

Hopefully I can get some help in figuring out what I'm missing here. Thanks in advance.