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!

Your resover return implements Resolve<Argument>, but must implements Resolve<Argument[]> — SergeyChe
– SergeyChe, Commented Aug 28, 2024 at 10:38
@NarenMurali i don't have a server.ts in my project. maybe this >>> will help? const express = require('express'); const app = express(); const path = require("path"); const { mongoose } = require('./db/mongoose'); const bodyParser = require('body-parser'); const { User, Argument,Temp, Term } = require('./db/models'); const jwt = require('jsonwebtoken'); app.use(bodyParser.json()); app.use(function (req, res, next) { res.header("Access-Control-Allow-Origin", "*"); res.header("Access-Control-Allow-Methods", "GET, POST, HEAD, OPTIONS, PUT, PATCH, DELETE"); }); — librogil
– librogil, Commented Aug 28, 2024 at 11:21
@librogil The file that contains app.get('/api/arguments', (req, res) => { Argument.find({ }).then((arguments) => { res.send(arguments); }); }) I want to know the order of the routes. — Naren Murali
– Naren Murali, Commented Aug 28, 2024 at 11:23
@librogil try defining the arguments route above the app.get('*' part — Naren Murali
– Naren Murali, Commented Aug 28, 2024 at 11:34

Naren Murali · Accepted Answer · 2024-08-28 11:46:51Z

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'));
});

answered Aug 28, 2024 at 11:46

Naren Murali

66.3k6 gold badges51 silver badges97 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Facing Angular resolver error after fixing "Cannot Get" problem

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related