Search code examples
node.jsangularservicemean-stackmean.io

How to intergrate angular and express


I am learning how to build MEAN apps and I was going through this code: https://github.com/linnovate/mean

In this code I notice that here: https://github.com/linnovate/mean/blob/master/src/app/auth/auth.service.ts (line 18 and some other lines as well) there is no base url. e.g

  export class IssueService {

  // url of the nodejs server
  url = 'http://localhost:4000';

  constructor(private http: HttpClient) { }

       getIssues() {
           return this.http.get(`${this.url}/issues`);
       } 
   //More code....

So my questions are:

  1. How is the angular code functioning without the base url or is it defined somewhere else?
  2. How do you configure angular to know the base without defining it ?
  3. Also in this code, when you run it... you can only access it from one url: localhost 4040... so my question is how is this achieved? How is angular and express integrated to work as one? ....(I am asking this because in other tutorials I have seen that angular has a different port number from express. You then use services to communicate between Angular and express)

Thanks in advance.


Solution

  • "start": "concurrently -c \"yellow.bold,green.bold\" -n \"SERVER,BUILD\" \"nodemon server\" \"ng build --watch\""
    

    See this command in package.json. What happening is, he is first build your angular project and watching for any changes and then serve that build project using express server. So there is no need for angular server.

    https://github.com/linnovate/mean/blob/master/server/config/express.js

    see line 41 he is serving your angular build project

    For question 2: How do you configure angular to know the base without defining it ? The base url is defined in protracter.conf.js (line 15)