2

Mirage does match defined routes when the backend calls are performed through the root url (localhost:4200/), but when we perform a backend call on a sub page, e.a.: localhost:4200/process, it will not work. When debugging the mirage code it will try to match by prefixing the url to be matched with "process". So in case BE call is "api/portal/affiliates/", it will try to match "process/api/portal/affiliates/" which fail as there doesn't exists a matching path. Any idea how to solve this.

We are using mirage.js in angular 9. The roue mirage.js config:

    routes() {
      this.passthrough();

      this.namespace = '/api/portal;
      this.get('affiliates', (schema, request) => {
        return schema.db.affiliates;
      })
}
edbras
  • 4,145
  • 9
  • 41
  • 78
  • Hm - I've never heard of Mirage's handler paths being affects by the current window location. Are you sure its not your app that's making the different call? Also, try using a leading slash on `this.get('/affiliates')` or maybe a trailing slash on the namespace? – Sam Selikoff Jun 09 '20 at 16:42
  • Thanks @SamSelikoff, we tried it with leading slash as well. The app is not making different call, which we see when we run it without mirage. Any idea why it uses the window location? (all working examples I see working only use the root url) – edbras Jun 10 '20 at 13:48
  • I honestly can't think of any :( If you upload a project that reproduces the issue, I'd be happy to take a look at it! – Sam Selikoff Jun 11 '20 at 16:54

1 Answers1

0

I am integrating mirage in Angular-9.

I was facing the same issue. Every time page gets refreshed on any URL with some routes it throws the error that mirage cannot find the route.

The issue was not with mirage. The issue was how I called the APIs.

Instead of doing

this.http.get('api/portal')

try to do as below

this.http.get('/api/portal')

Add / ( forward slash ) while calling an API. This solved my problem. Let me know if it still does not resolve your issue.

Kalpesh Shingala
  • 376
  • 2
  • 5
  • 19