Serve Angular Application with ngrok

[aparzi]

Describe the problem that you experienced

I was using ngrok to serve an Angular app in a remote link but without the configuration in the Angular.json I get an error related to vite configurations.

Enter the URL of the topic with the problem

No response

Describe what you were looking for in the documentation

I don't know if there's a section in the documentation dedicated to this scenario. If so, could we consider adding it? Eventually I could open a PR

Describe the actions that led you to experience the problem

No response

Describe what you want to experience that would fix the problem

The error message generated, in my opinion, is inconsistent with the change to be made, because a vite.config.js file is typically missing. The solution is to edit angular.json by adding the URL generated by ngrok to the allowedHosts array.

Add a screenshot if that helps illustrate the problem

No response

If this problem caused an exception or error, please paste it here

Blocked request. This host ("2759795c2071.ngrok-free.app") is not allowed.
To allow this host, add "2759795c2071.ngrok-free.app" to `server.allowedHosts` in vite.config.js.

If the problem is browser-specific, please specify the device, OS, browser, and version

Provide any additional information here in as much as detail as you can

[alan-agius4]

We should make this error more actionable.

[aparzi]

@alan-agius4 Yes, exactly!

The error message should guide users to add the host to the allowedHosts array in angular.json, as I mentioned in the issue description. This would make it immediately clear how to fix it.

Wdyt?

[alan-agius4]

Yes

[hybrist]

Another (potential) issue: The ngrok hostname may be developer-specific which makes it a bit awkward to have angular.json as the place to put it (vs a CLI flag). But improving the error message is likely a much easier change to make to at least make it less confusing.

[aparzi]

I would like to try to work on this problem, if possible. Thanks.

[aparzi]

@alan-agius4 @hybrist

Before submitting the PR I wanted to know if a solution like this would be suitable. Thanks a lot

[alan-agius4]

@aparzi, yeah that looks good, although I would omit the note.

[aparzi]

@aparzi, yeah that looks good, although I would omit the note.

I oopened a PR

[mohacelhosen]

I’m trying to serve my Angular 20 app over ngrok using ng serve --host 0.0.0.0 --port 4200

Even after creating a vite.config.ts file with the following configuration, the dev server still blocks the ngrok host (403 Forbidden): import { defineConfig } from 'vite';

export default defineConfig({ server: { host: true, // allow binding to 0.0.0.0 port: 4200, strictPort: true, allowedHosts: [ '.ngrok-free.app', '.ngrok.app' ] } });

Observed Behavior: Blocked request. This host ("<ngrok-id>.ngrok-free.app") is not allowed.