Merge branch 'bugfix/fix-routing' into 'main'

Bugfix/fix routing

See merge request shop-sphere/frontend!36

angular.json

@@ -27,7 +27,8 @@
             "inlineStyleLanguage": "scss",
             "assets": [
               "src/favicon.ico",
-              "src/assets"
+              "src/assets",
+              "src/web.config"
             ],
             "styles": [
               "src/styles.scss"
@@ -44,8 +45,8 @@
                 },
                 {
                   "type": "anyComponentStyle",
-                  "maximumWarning": "2kb",
-                  "maximumError": "4kb"
+                  "maximumWarning": "50kb",
+                  "maximumError": "50kb"
                 }
               ],
               "outputHashing": "all"

src/app/app.module.ts

 import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 
-import { CommonModule } from '@angular/common';
+import { CommonModule, HashLocationStrategy, LocationStrategy } from '@angular/common';
 import { HttpClientModule } from '@angular/common/http';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { MatSnackBarModule } from '@angular/material/snack-bar';
@@ -41,7 +41,9 @@ import { UserComponent } from './components/user/user.component';
     MatSnackBarModule,
     BrowserAnimationsModule,
   ],
-  providers: [],
+  providers: [
+    {provide: LocationStrategy, useClass: HashLocationStrategy}
+  ],
   bootstrap: [AppComponent],
 })
 export class AppModule {}

src/app/components/products/products.component.html

 <ng-container *ngIf="!productsList.length; else showProducts">
-  <p>No products available yet. <br />Please come back later</p>
+  <div class="center-content">
+    <p>No products available yet. <br/>The backend is loading... Please be patient, this may take a moment.</p>
+  </div>  
 </ng-container>
+
 <ng-template #showProducts>
   <section>
     <div class="row">

src/app/components/products/products.component.scss

@@ -2,6 +2,14 @@
 
 $transition-time: 2.3s;
 
+.center-content {
+    text-align: center;
+    padding: 20px;
+    background-color: #fff;
+    margin-top: 200px;
+    margin-bottom: 400px;
+  }
+  
 section{
     margin: 25px;
 }

src/web.config

+<?xml version="1.0" encoding="UTF-8"?>
+<configuration>
+  <system.webServer>
+    <rewrite>
+      <rules>
+        <rule name="angular cli routes" stopProcessing="true">
+          <match url=".*" />
+          <conditions logicalGrouping="MatchAll">
+            <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
+            <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
+          </conditions>
+          <action type="Rewrite" url="/" />
+        </rule>
+      </rules>
+    </rewrite>
+  </system.webServer>
+</configuration>
\ No newline at end of file