0

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(),
  ]
};
2
  • the mime-type error is actually caused by HTML being returned... probably a 404 error in the form of a web page. You either want to switch to hash location strategy, or redirect all requests (but api endpoint ones, or links to static resources) at the server to your single-page... index.html. Commented Feb 12 at 22:17
  • 1
    I forgot to mention that the styles.css part 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 Commented Feb 13 at 1:41

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.