Skip to content

[Angular] Hosting with IONOS

Georg Höller
Georg Höller
3 min read
[Angular] Hosting with IONOS
Photo by Luca Bravo / Unsplash


[ASP.NET Core 6.0 | Angular] - Hosting with Ionos
Update for my previous posts about hosting an angular frontend and ASP.NET Core 6 backend. Prerequirements: * active ionos windows hosting subscription * core 6 project * buildable angular project Ionos Setup Open up your favorite FTP client and connect it to your ionos webspace. Cre…

In the previous post from this series we learned how to host an ASP.NET Application with IONOS.

At the moment I'm working mainly as an Angular developer. So in this post, we will learn how to host an Angular App with IONOS.


  • a buildable Angular App
  • an IONOS Account with a subscription

Angular App

You can use any buildable Angular App for this. For this tutorial, I will use my current landing page state. It's a simple landing page app with an image on top and three links underneath.
If you don't have a buildable Angular App you can use the tour of heros from the angular team.

Now change to the terminal and build your angular app:

ng build --prod

For my project the result in the dist folder looks like the following:

We are done with that for now - let's continue with IONOS.

IONOS Settings

I'm using a "Webhosting Essential Windows"-Subscription for this tutorial. If you have another subscription the steps may differ.

The landing page should be the first thing a visitor sees.
So, first I created a new folder with the name "landing" in the IONOS webspace. You can use the built-in WebFiles Explorer or use a third-party FTP client. (I'm using WinSCP)

Afterward, I switch to the Domains & SSL section in the IONOS menu and selected my domain.
The website mode should be "Webspace". The target should be the previously created folder - for me, it's "/landing".


Now you go back to your Angular dist folder and copy all the files to your newly created webspace folder.
Open your browser and check if the site is working :)

Angular Router

If you ever hosted an Angular App with IIS you are surely familiar with the "IIS rewrite module". Unfortunately, IONOS doesn't have it installed, so we have to use the RewriteEngine and create a ".htascess" file. (IONOS Docs)

My final ".htaccess"-File looks like the following:

RewriteEngine On
RewriteBase /
# Redirection to HTTPS:
RewriteCond %{SERVER_PORT} !=443
RewriteRule ^(.*)$$1 [R=301,L]

# Redirection of requests to index.html
RewriteRule ^.*$ - [NC,L]
# Redirect all non-file routes to index.html
RewriteRule ^(?!.*\.).*$ /index.html [NC,L]

With this config, you have to place the .htaccess file on the same level as index.html.

The base was provided by this great generator, maybe it can help you: ngx-htaccess-generator



Related Posts

Members Public

[Angular | Storybook] Tailwind, Directives, Content Projection, Icons and i18n

Install packages npm i -D @nx/storybook npm i -D @storybook/angular Create config nx g @nx/storybook:configuration <project-name> I created the config inside the main app to share some configs/modules. My stories are located at libs/shared/ui. That's why I had to

[Angular | Storybook] Tailwind, Directives, Content Projection, Icons and i18n
Members Public

[Angular | RxJS] BehaviorSubject with custom states

Whenever I call an api, often my frontend has to go through some different visualization steps. Imagine you have some kind of search input and a list which displays the results but you want to show an loading indicator, an error hint and something different when the result is empty.

[Angular | RxJS] BehaviorSubject with custom states
Members Public

[Angular] Dynamic App Config and Translations in a Submodule

When I'm setting up a new angular application, I always start with translation support and an external app config json loader. You should never start a new app without an internationalization (i18n) system - even if you only support one language! We are going to use the package

[Angular] Dynamic App Config and Translations in a Submodule