Angular2 app struggling with GET requests after upgrading from starter project

Backend
1

I’m having trouble with GET requests in my Angular2 app after switching from a forked starter project to a new one created with Angular CLI. The Express backend seems fine, but the requests aren’t working anymore.

Here’s a snippet of my backend code:

app.get('/courseList', (req, res) => {
  CourseModel.find((err, courses) => {
    if (err) {
      console.error(err);
    } else {
      res.json({ courses });
    }
  });
});

And here’s how I’m handling GET requests in Angular:

@Injectable()
class DataService {
  constructor(private http: Http) {}

  fetchCourses(): Observable<CourseData> {
    return this.http.get('/courseList')
      .map(this.parseResponse)
      .catch(this.handleError);
  }

  private parseResponse(res: Response) {
    return res.json();
  }

  private handleError(error: any) {
    console.error('An error occurred:', error);
    return Observable.throw('Something went wrong. Please try again later.');
  }
}

Can someone help me figure out why the GET requests aren’t working in the new setup? I’m not sure if it’s a problem with my logic or how I’m connecting Express to Angular. Any advice would be great!

2

I encountered a similar issue when transitioning to Angular CLI. One crucial step often overlooked is configuring CORS on your Express backend. Ensure you’ve installed the ‘cors’ package and implemented it in your server.js or app.js file:

const cors = require('cors');
app.use(cors());

Additionally, verify that your Angular service is using the correct URL for API calls. If your backend is running on a different port, you’ll need to specify the full URL:

return this.http.get('http://localhost:3000/courseList')

Lastly, double-check that your HttpClientModule is properly imported in your app.module.ts. These steps should resolve most common GET request issues in Angular CLI projects.

3

hey ryan, had similar issues after switching to angular cli. make sure ur proxy config is set up right in angular.json. also check if the base url for api requests is correct in ur environment files. sometimes its the little things that trip us up!

4

hmmm, interesting problem! have u tried using the httpClient instead of http? it’s the newer way in angular. also, double-check ur imports - sometimes they get messed up when switching projects. oh, and make sure ur backend is actually running when u test. lemme know if any of that helps!