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] 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 @ngx-translate/core.

[Angular] Dynamic App Config and Translations in a Submodule
Members Public

[Capacitorjs | Angular] Back Swipe Support for iOS and Android

Recently I recognized that capacitorjs apps does not have a native back swipe support. Little bit weird I thought but the solution is quite simple! iOS - Native To enable the iOS back swipe we need to write a capacitor plugin. I tried it without a plugin but inside the

[Capacitorjs | Angular] Back Swipe Support for iOS and Android
Members Public

[Angular] Routing Helper - a Typesafe Routing Attempt

It always bothered me that you have to define the routing paths as strings. If a route changes, you have to change all references manually. There must be a better way! Routing Constants The constants are for your specific app - here you can define a class which represents your

[Angular] Routing Helper - a Typesafe Routing Attempt