在现有的Symfony2项目中集成Angularjs 2项目

We want to get rid of an old Flex project, rebuilding it into HTML5. As a result of that we're building a proof of concept in Angularjs2 and want to integrate the services in the existing PHP Symfony 2 backend. But since Angular runs 'out of the box' with nodejs on localhost:3000 and the Symfony2 project runs on localhost:8888 I get session issues. Requests sent from the localhost:3000 get different PHPSESSID back in every single call while logged in, so the server doesn't remember the user.

What is the best way to approach this problem?

Can I run the Angularjs project from localhost:8888? If I try that it complains it's not running from localhost:3000.

Ok thank you, D.Dimitrioglo, for that last comment, 'It is just a notification, is not an error. do not pay your attention to this', so I didn't spend time on figgering out why my host was unsuported. I need nodejs though to compile the TypeScript I use into Javascript, so that was not it. Also I do not explicitly need NelmioCorseBundle and FosRestBundle. My problem is

1. I had to do a proper npm clean/install in the root of my php project, instead of copy pasting it from my angularjs/ folder.
2. the angular/router-depricated (routing the url to different pages in a project) conflicts with the Symfony2 routing functionality so when I removed the angular router it showed the right page and could run it from localhost:8888

After that my session was preserved after logged in! Thx for your comment it guided me in the right direction!

Let me show an example without NodeJs

Firs, you have to install NelmioCorsbundle and FosRestbundle, than configure them like

nelmio_cors:
    paths:
        '^/':
            origin_regex: true
            allow_origin: [ 'http://your-domain.com' ] << your frontend
            allow_headers: ['Origin','Accept','Content-Type']
            allow_methods: ['POST', 'PUT', 'GET', 'DELETE']
            max_age: 3600
            hosts:
                - "^(http?://)?api\.your-domain.com?" << your backend as subdomain
fos_rest:
    param_fetcher_listener: true
    body_listener: true
    format_listener: true
    view:
        view_response_listener: 'force'

Write your general getter in your app.service (frontend)

yourApp.factory('appService', ['$http', '$q', '$localStorage',
  function($http, $q, $localStorage)
{
  var $this = {};

  $this.mainGetter = function(action, config) {
    var deferred = $q.defer();
    $http({
      method: 'GET',
      url: $this.domain + action,
      params: config
    }).then(function(data) {
      deferred.resolve(data);
    }, function(error) {
      deferred.reject(error);
    });
    return deferred.promise;
  };

  return $this;
}]);

then create an endpoint in your backend

/**
 * API Controller
 * @CFG\Route("/api")
 */
class ApiController extends FOSRestController
{
    /**
     * @CFG\Route("/get-something", name="get_smt")
     * @CFG\Method("GET")
     * @param Request $request
     * @return JsonResponse
     */
    public function getPostsAction(Request $request)
    {
        $em = $this->getDoctrine()->getManager();
        $something = $em->getRepository('SomeRepo')->findAll();

        $serializer = $this->get('jms_serializer');
        return new JsonResponse([
            'isError' => 0,
            'data' => $serializer->serialize($something, 'json')
        ]);
    }
};

And finnaly get the data from your angular controller or service

  $this.getApiData = function(alias) {
    var deferred = $q.defer();
    appService.mainGetter('/get-something', {})
      .then(function(response) {
        var data = response.data;
        if (data.isError) {
          deferred.reject(data.error);
        } else {
          deferred.resolve(data.data);
        }
      });
    return deferred.promise;
  };