Angular route doesn't render if pasting url directly or refreshing the page

I'm making a pastebin-like client on Angular 18 and so far the interface works great. Only issue is that refreshing the page or trying to directly enter the website via the full url (very important for a paste service) the page doesn't load at all (stays completely white). I saw a couple of similar questions being asked before, but with no answers. Probably because of the lack of details on some of those.

So, why does this happens and how do I fix it? Let me know if additional information is needed.

Details you might need to know:

1. Angular routes:

export const routes: Routes = [
{
path: '',
component: NewPasteComponent,
},
{
path: 'paste/:uuid',
component: ViewPasteComponent,
},
];

1. The ViewPasteComponent

export class ViewPasteComponent implements OnInit {

protected uuid = input.required<string>();

constructor(
private router: Router,
private http: HttpClient
) {}

1. The error thrown in the console suggests that it's treating the "paste" route as a root directory, because it's looking for styles in /paste/styles.css instead of /styles.css

Refused to apply style from 'http://localhost:4200/paste/styles.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
GET http://localhost:4200/paste/polyfills.js net::ERR_ABORTED 404 (Not Found)
GET http://localhost:4200/paste/main.js net::ERR_ABORTED 404 (Not Found)

1. The application has static resources available in the /public directory linked to path /

"tsConfig": "tsconfig.app.json",
"assets": [
{
"glob": "**/*",
"input": "public"
}
],

1. ApplicationConfig

export const appConfig: ApplicationConfig = {
providers: [
provideZoneChangeDetection({ eventCoalescing: true }),
provideRouter(routes, withComponentInputBinding()),
provideHttpClient(),
]
};

Continue reading...