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:
- Angular routes:
export const routes: Routes = [
{
path: '',
component: NewPasteComponent,
},
{
path: 'paste/:uuid',
component: ViewPasteComponent,
},
];
- The ViewPasteComponent
export class ViewPasteComponent implements OnInit {
protected uuid = input.required<string>();
constructor(
private router: Router,
private http: HttpClient
) {}
- 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.cssinstead 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)
- The application has static resources available in the
/publicdirectory linked to path/
"tsConfig": "tsconfig.app.json",
"assets": [
{
"glob": "**/*",
"input": "public"
}
],
- ApplicationConfig
export const appConfig: ApplicationConfig = {
providers: [
provideZoneChangeDetection({ eventCoalescing: true }),
provideRouter(routes, withComponentInputBinding()),
provideHttpClient(),
]
};
styles.csspart is an example, because it happens with the 3 files mentioned in the error. In another note, using hash location strategy fixed my issue! thxx