Integrate Angularjs 2 project in exesting Symfony 2 project

Question

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.

Answer 1

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!

Answer 2

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