This is my project structure:
- /dist (Created after ng build --prod)
- index.html
- <Other JS/CSS files>
- /e2e
- /node_modules
- app.yaml
- server.mjs
- package.json
Here's my app.yaml:
runtime: nodejs12
handlers:
- url: /api
script: auto
- url: /(.+\.js)
static_files: dist/\1
upload: dist/(.+\.js)
secure: always
redirect_http_response_code: 301
- url: /(.+\.css)
static_files: dist/\1
upload: dist/(.+\.css)
secure: always
redirect_http_response_code: 301
- url: /(.+)
static_files: dist/index.html
upload: dist/index.html
secure: always
redirect_http_response_code: 301
- url: /
static_files: dist/index.html
upload: dist/index.html
secure: always
redirect_http_response_code: 301
Here's how my endpoints are written in server.mjs
app.get('/api/description/:ticker', (req, res) => {
// api call here
});
...
...
...
app.get('/', (req, res) => {
res.sendFile(path.join(__dirname, 'dist/index.html'));
});
All my endpoints start with /api.
Here's a sample call from the front end
getDescription(ticker) {
return this.http.get('api/description/' + ticker);
}
Everything is functional locally. But I don't seem to get things to work when I deploy it to GCP. The above project structure is the same structure uploaded to GCP.
Issue:
Any API call returns the index.html cause parsing error but with 200 OK
error:
error: SyntaxError: Unexpected token < in JSON at position 0 at JSON.parse (<anonymous>) at XMLHttpRequest.o (https://tradingapp-294407.wl.r.appspot.com/main-es2015.fc0026b256e2c70aaeae.js:1:1075999) at l.invokeTask (https://tradingapp-294407.wl.r.appspot.com/polyfills-es2015.6022d6f28e0500e60d30.js:1:7242) at Object.onInvokeTask (https://tradingapp-294407.wl.r.appspot.com/main-es2015.fc0026b256e2c70aaeae.js:1:962460) at l.invokeTask (https://tradingapp-294407.wl.r.appspot.com/polyfills-es2015.6022d6f28e0500e60d30.js:1:7163) at i.runTask (https://tradingapp-294407.wl.r.appspot.com/polyfills-es2015.6022d6f28e0500e60d30.js:1:2651) at u.invokeTask [as invoke] (https://tradingapp-294407.wl.r.appspot.com/polyfills-es2015.6022d6f28e0500e60d30.js:1:8292) at p (https://tradingapp-294407.wl.r.appspot.com/polyfills-es2015.6022d6f28e0500e60d30.js:1:20575) at XMLHttpRequest.f (https://tradingapp-294407.wl.r.appspot.com/polyfills-es2015.6022d6f28e0500e60d30.js:1:20899)
text: "<!doctype html>↵<html lang="en">↵↵<head>↵ <meta charset="utf-8">↵ <title>Codebase</title>↵ <base href="/">↵ <meta name="viewport" content="width=device-width, initial-scale=1">↵ <link rel="icon" type="image/x-icon" href="favicon.ico">↵ <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900&display=swap" rel="stylesheet">↵ <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">↵<link rel="stylesheet" href="styles.34652ea53ab2d653f3ba.css"></head>↵↵<body class="mat-typography">↵ <app-root></app-root>↵<script src="runtime-es2015.66c79b9d36e7169e27b0.js" type="module"></script><script src="runtime-es5.66c79b9d36e7169e27b0.js" nomodule defer></script><script src="polyfills-es5.6e1055b712d0b250b19e.js" nomodule defer></script><script src="polyfills-es2015.6022d6f28e0500e60d30.js" type="module"></script><script src="scripts.7d536d3103fdc12500b7.js" defer></script><script src="main-es2015.fc0026b256e2c70aaeae.js" type="module"></script><script src="main-es5.fc0026b256e2c70aaeae.js" nomodule defer></script></body>↵↵</html>"
__proto__: Object
headers: kp {normalizedNames: Map(0), lazyUpdate: null, lazyInit: ƒ}
message: "Http failure during parsing for https://tradingapp-294407.wl.r.appspot.com/api/autocomplete/aapl"
name: "HttpErrorResponse"
ok: false
status: 200
statusText: "OK"
url: "https://tradingapp-294407.wl.r.appspot.com/api/autocomplete/aapl"
I feel the issue is something to do with the app.yaml file but I just can't get the right result after multiple trials and errors.
Anyone know why this is happening?
Thanks.
Note: Everything works locally. In GCP the pages get loaded with current CSS etc. and everything. Only the APIs are not working.