Angular 4/5和Nginx代理：SyntaxError：期望的表达式，得到了“ <”

Question

I'm running 2 sites, one in PHP and one in Angular 5 with nginx proxy on top. Here's my proxy config:

server {
    listen 80;
    listen [::]:80;
    server_name mysite.loc;

    ### php
    location /
    {
        proxy_pass http://127.0.0.1:8080;
        include /etc/nginx/proxy_params;
    }

    ### angular (ng serve --disable-host-check)
    location /dashboard
    {
        proxy_pass http://127.0.0.1:4200;
        include /etc/nginx/proxy_params;
    }

}

Accessing http://127.0.0.1:8080 , http://127.0.0.1:4200 works and that http://mysite.loc displays what is in the PHP site (from port 8080).

http://mysite.loc/dashboard also works but Angular outputs this error on the console:

SyntaxError: expected expression, got '<'

I tried serving the site using this:

ng s --disable-host-check --base-href /dashboard/

caused an infinite loop loading sockjs-node resources

Note that the Angular application is newly-set up and that no special routing exists yet. I figured that the site starting at /dashboard confuses Angular's internal routing mechanism.

Anyone knows how to remedy this problem? TIA

Answer 1

I had the same, but having 2 react app in one node with nginx, I could fix it with: https://serverfault.com/questions/562756/how-to-remove-the-path-with-an-nginx-proxy-pass/562850#562850

You can try modifying your nginx config like:

    location /dashboard {
            return 302 /dashboard/;
    }
    location /dashboard/ {
            proxy_pass      http://127.0.0.1:4200/;               
    }