Deploying Angular 12 app with Routing to separate local apache 2 server blank/white page

Question

I have an Angular app which I've built using the command: ng build. This has created a dist folder in my project then inside the dist folder it created another folder with a name of the title of the app<title>name-of-title</title>. Inside that folder contains the following files:

I then installed Apache 2 on a seperate linux debian machine via apt and copied the files in the dist/nameoftitle into the /var/www/html on the seperate linux debian machine. So now /var/www/html contains those 7 files.

Next I came across this stack question and this github question and created a .htaccess file that I moved to the /var/www/html in the Apache 2 machine. I also modified the /etc/apache2/sites-enabled/000-default.conf file and added:

<Directory "/var/www/html">
  AllowOverride All
</Directory>

I then ran the a2enmod rewrite command and then sudo systemctl restart apache2.

However when I browse to localhost on a broswer on my Apache 2 machine all I can see is the name of the app at the top in the tab but the entire rest of the app is completly blank/white and I'm not sure why.

I did have a look in the browser console and found some errors that read:

ERROR NullInjectorError: R3InjectorError(t)[t -> t -> InjectionToken NgxMqttServiceConfig -> InjectionToken NgxMqttServiceConfig -> InjectionToken NgxMqttServiceConfig]: 
  NullInjectorError: No provider for InjectionToken NgxMqttServiceConfig!
    at Zi.get (http://localhost/main.67973beb071f01cde7a4.js:1:245648)
    at ns.get (http://localhost/main.67973beb071f01cde7a4.js:1:246881)
    at ns.get (http://localhost/main.67973beb071f01cde7a4.js:1:246881)
    at ns.get (http://localhost/main.67973beb071f01cde7a4.js:1:246881)
    at tr (http://localhost/main.67973beb071f01cde7a4.js:1:226834)
    at er (http://localhost/main.67973beb071f01cde7a4.js:1:226911)
    at Object.factory (http://localhost/main.67973beb071f01cde7a4.js:1:439037)
    at ns.hydrate (http://localhost/main.67973beb071f01cde7a4.js:1:248917)
    at ns.get (http://localhost/main.67973beb071f01cde7a4.js:1:246833)
    at tr (http://localhost/main.67973beb071f01cde7a4.js:1:226834)

I do use ngx-mqtt in my app because it's essentially a mqtt client that recieves mqtt messages from a mqtt broker. However when I run my app in development using the ng serve running on localhost:4200 it works fine.

I've never used apache before so I don't know If I'm missing something. I've came across other guides that say the same as the ones I linked in this question, but nothing seems to work.

Here is the full index.html file that was generated with ng build (picture because it's too long to paste into here):

Here is the full .htaccess file:

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . index.html [L]
</IfModule>

Here is the full 000-default.conf file:

   <VirtualHost *:80>
    # The ServerName directive sets the request scheme, hostname and port that
    # the server uses to identify itself. This is used when creating
    # redirection URLs. In the context of virtual hosts, the ServerName
    # specifies what hostname must appear in the request's Host: header to
    # match this virtual host. For the default virtual host (this file) this
    # value is not decisive as it is used as a last resort host regardless.
    # However, you must set it for any further virtual host explicitly.
    #ServerName www.example.com

    ServerAdmin webmaster@localhost
    DocumentRoot /var/www/html

    # Available loglevels: trace8, ..., trace1, debug, info, notice, warn,
    # error, crit, alert, emerg.
    # It is also possible to configure the loglevel for particular
    # modules, e.g.
    #LogLevel info ssl:warn

    ErrorLog ${APACHE_LOG_DIR}/error.log
    CustomLog ${APACHE_LOG_DIR}/access.log combined

    # For most configuration files from conf-available/, which are
    # enabled or disabled at a global level, it is possible to
    # include a line for only one particular virtual host. For example the
    # following line enables the CGI configuration for this host only
    # after it has been globally disabled with "a2disconf".
    #Include conf-available/serve-cgi-bin.conf

<Directory "/var/www/html">
  AllowOverride All
</Directory>

</VirtualHost>

# vim: syntax=apache ts=4 sw=4 sts=4 sr noet