Facing Angular resolver error after fixing "Cannot Get" problem

Question

Not a long ago I've deployed my project. Only after deploying I realized that I have this "Cannot GET" problem when refreshing my page:

Cannot GET / on page refresh with express

I've fixed it by copying the answer to that question:

app.get('*', (req, res) => {
    res.sendFile(path.join(__dirname, '../frontend/dist', 'index.html'));
});

But after adding that to my code, it created a new issue: When I try to enter the page that is using Angular Resolver, I'm getting this error in the console:

Error: Uncaught (in promise): X_: {"headers":{"normalizedNames":{},"lazyUpdate":null},"status":200,"statusText":"OK","url":"https://tacheles-7fbc518a6a19.herokuapp.com/api/arguments", "ok":false,"name":"HttpErrorResponse","message":"Http failure during parsing for https://tacheles-7fbc518a6a19.herokuapp.com/api/arguments"}

This is the get request from the backend file I made the changes that solved the "Cannot GET" problem:

app.get('/api/arguments', (req, res) => {
    Argument.find({
    }).then((arguments) => {
        res.send(arguments);
    });
})

This is (part of) my app-routing.module.ts

  { path: '', component: HomeComponent },
  { path: 'about', component: AboutComponent },
  { path: 'dictionary', component: DictionaryComponent },
  { path: 'arguments', component: ArgumentsComponent, resolve: { arguments: ArgumentsResolverService} },

(All paths are working except the 'arguments' one)

arguments-resolver.service.ts

import { Injectable } from '@angular/core';
import { Resolve } from '@angular/router';
import { Observable } from 'rxjs'; 
import { Argument } from 'src/app/models/argument.model';
import { TachlesService } from 'src/app/tachles.service';

@Injectable({
  providedIn: 'root'
})

export class ArgumentsResolverService implements Resolve<Argument> {

  constructor(private tachlesService: TachlesService) { }

  resolve(): 
  Observable<any> | Promise<any> | Argument {
    return this.tachlesService.getArguments();
  }
}

Even when I commented the use of the Resolver in the arguments.component.ts file, I still got the same error, so I figured there's no need to copy that file as well.

Any ideas? Thanks!

Answer 1

The routes are match from top to bottom, so your wildcard route is matching before the arguments route, hence the problem.

The solution is to promote the argument route (and all node api routes) above the default HTML wildcard route.

app.get('/api/arguments', (req, res) => {
    Argument.find({
    }).then((arguments) => {
        res.send(arguments);
    });
})
...

...
app.get('*', (req, res) => {
    res.sendFile(path.join(__dirname, '../frontend/dist', 'index.html'));
});