Try to deploy an Angular 17 web app with proxy config, but it does not work in production

298 Views Asked by At

I'm really clueless about the error. Locally in dev mode, it works. But in production, the request return a web page instead of a RSS feed, as if the path was wrong and it return the root (home page instead).

Note: It's a firebase cloud project I try to deploy.

My proxy.config.json looks like this:

{
    "/rss": {
         "target": "https://baladoquebec.ca/podcast-name",
         "secure": false,
         "changeOrigin": true
    }
}

And the angular.json looks like:

"serve": {
    "builder": "@angular-devkit/build-angular:dev-server",
    "options": {
        "proxyConfig": "proxy.conf.json"
    },
    "configurations": {
        "production": {
            "buildTarget": "halo-comm:build:production"
        },
        "development": {
            "buildTarget": "halo-comm:build:development"
        }
    },
    "defaultConfiguration": "development"
},

And the http.get function looks like this:

getFeedList(): Observable<any> {
    return this.http.get('/rss', { responseType: 'text' })
        .pipe(
            map(this.extractFeedList),
            catchError(this.handlerError)
        );
}

Is there a way to debug or add trace to understand how the proxy works?

UPDATE:

I've found that in firebase.json, I can add config on headers and redirects. No success so far, but working on this solution.

UPDATE #2:

When I click on the redirect link https://mydomain.app/rss, it redirect to the url mentionned at the beginning.

1

There are 1 best solutions below

0
Midhun On

Correct me if i am wrong but proxy.config.json or proxy server only works in local environment and only user to code, debug or test the application.

While to work in production or multiple 'environments' you need to set up enviroment files and build profiles for each env in angular.json. Now the domianBaseURL or your backend path is should be specified in ENV's and writing an API interceptor to switch while in production with a production mode flag also works.

Can take a Reference from here https://angular.io/guide/build#configure-environment-specific-defaults

Hope this helps :)