Share an Angular dev server: Invalid Host header and Blocked request

ng serve answers only the hosts it knows. Current projects turn others away with Blocked request; older ones on the webpack builder say Invalid Host header. Add the name to allowedHosts in angular.json, or share the dev server with ouicu, which needs neither, and keeps hot reload.

Blocked request. This host is not allowed

Angular's docs on the application builder:

Its dev server runs on Vite. Through a tunnel that passes the public name on, it answers with a page headed by the first line here, and the second under it:

Blocked request. This host ("calm-otter-4821.ouicu.app") is not allowed.To allow this host, add it to allowedHosts under the serve target in angular.json.

The wording differs from plain Vite's, which points at vite.config.js: Angular keeps the setting in its workspace file instead.

Invalid Host header

Projects still on the webpack builder, @angular-devkit/build-angular:dev-server, get webpack-dev-server's answer instead: a bare page that says only

Invalid Host header

It comes with 403 Forbidden. That builder now warns, each time it starts, that it is deprecated in favour of @angular/build:dev-server.

Add the host to allowedHosts

For a tunnel that keeps the public name, add it under the serve target in angular.json and restart ng serve. A leading dot allows every name under it:

"serve": {  "builder": "@angular/build:dev-server",  "options": {    "allowedHosts": [".ouicu.app"]  },

The option also takes true. Angular's own schema describes that value: “Indicates that all hosts are allowed. This is not recommended and a security risk.” It is the DNS rebinding hole the check exists to close, so prefer the one name.

Share ng serve with ouicu

Start the dev server, then share its port in a second terminal. Getting started has the install.

ng serve# in a second terminalouicu share 4200

No allowedHosts and no --host: ouicu connects on localhost, and ng serve sees requests for localhost:4200. Hot reload connects to wss://calm-otter-4821.ouicu.app, and an edit to a component's template shows in place, without a reload. On the webpack builder, its live reload socket, /ng-cli-ws, connects too, and an edit reloads the page.

If another project already has the port, run ng serve --port 4300 and share 4300. On Free, a share runs for up to 2 hours, and visitors see a short notice from ouicu first.

With server-side rendering

A project made with --ssr renders its pages on the server through the link too. For each one, the terminal notes:

Received "x-forwarded-host" header but "trustProxyHeaders" was not set up to allow it.

Angular's server ignores X-Forwarded-Host unless told to trust it, so it renders as if for localhost:4200, not the link's name. The page still loads and works; the note is about which address the server believes.

On your phone

The QR code ouicu prints opens the link on a phone, on any network (QR codes). For the same Wi-Fi without a link, start ng serve --host 0.0.0.0 and use your computer's address; addresses pass the host check as they are. How to open localhost on your phone has both ways.

Keep a preview to one client

A random link is hard to guess, but it gets forwarded. On Hobby and Pro, put a password on the share:

ouicu share 4200 --password

On Pro, list the people who may open it instead. They type their email address and get a link to open it:

ouicu share 4200 --allow [email protected]

ouicu asks at its own door, so nothing changes in angular.json.

Upload the build

For a link that stays up with your laptop closed, build and upload. ng build writes to a folder named after the project, in dist, and the files to upload are in its browser folder. my-app stands for your project's name:

ng buildouicu deploy dist/my-app/browser --spa

--spa answers every route with index.html, for the Angular router. An upload is static files only, so a project with server-side rendering uploads as a browser-only app (Uploading a built site, show a client a website before it goes live).