Angular app results in "host ('angular-ui.fly.dev') is not allowed"

JavaScript
1

I all. I have a strange problem.

A while back I started up a simple UI in Angular 16. It’s still running as we speak.

I’m standing up a new app and wanted to use the most recent version of Angular. I used the same Dockerfile, which looks like this

FROM node:alpine AS builder

WORKDIR /app

COPY . /app

RUN npm install
RUN npm install -g @angular/cli
EXPOSE 3000
CMD ["ng", "serve", "--port", "3000", "--host", "0.0.0.0"]

I didn’t even bother removing the “AS builder” alias that I never ended up actually using. This Dockerfile also works in my local Docker.

When I deployed this time, however, I got this error

Blocked request. This host ("angular-ui.fly.dev") is not allowed.
To allow this host, add "angular-ui.fly.dev" to `server.allowedHosts` in vite.config.js.

It looks like the newer versions of Angular have some built-in integration with Vite, because I hadn’t incorporated it. The most recent attempts have been with the default Angular app as created with ng new.

I suspect the vite.config.js is not the correct solution, but I tried adding this anyway, adding this to my root directory

import { defineConfig } from 'vite'
import angular from '@analogjs/vite-plugin-angular'

export default defineConfig({
  plugins: [
    angular()],
  server: {
    allowedHosts: ['angular-ui.fly.dev']
  }
});

But the error remains. I have also tried adding the allowed-hosts option to the CMD line of the Dockerfile to

CMD ["ng", "serve", "--port", "3000", "--host", "0.0.0.0", "--allowed-hosts", "angular-ui.fly.dev"]

Which actually just causes a 502, as does changing the “–host” option to “angular-ui.fly.dev”.

What am I missing here?

3

Perhaps this is why? :thinking:

Also, it seems like the Vite config goes in the angular.json

1 Like
4

Thanks for the response.

I never did figure out what exactly was causing that error, but I decided to look further into Angular builds and how they work and I realized I was going about this in a pretty fundamentally wrong way. ng serve shouldn’t be in my production builds, from what I was reading. My new Dockerfile looks like this and is working as expected.

FROM node:24 AS build
WORKDIR /usr/src/app
COPY package*.json ./
RUN npm ci
RUN npm install -g @angular/cli
COPY . .
RUN npm run build --prod
FROM nginx:alpine
COPY --from=build /usr/src/app/dist/angular-ui/browser /usr/share/nginx/html
EXPOSE 80
1 Like