Angular2 and Symfony combined in the same application

2
votes

this is my first question on stack overflow so please be kind!

I have designed a Symfony server based application with an almost complete backend interface. Using symfony router, i can login in the backend using a url (ex. www.domain.com/admin) and see backend pages.

Based on this backend, i want to create an Angular2 application for dealing with the front end. It is quite straight forward to make it working for the front page url (www.domain.com). However, if i use any subroutes which would otherwise work in an Angular2 app (ex. www.domain.com/inner-page), Symfony router takes over and throws a 404 Not Found - NotFoundHttpException.

The question is, how can i use both routers in "parallel"? Any URL under www.domain.com/admin will be handled by Symfony router, and any other url by Angular2 router?

EDIT

Thank you for your replies!

I have something in mind. It might not be elegant, since it will require manual exclusion of angular routes from symfony, and vice versa, but it will look cleaner. I am still working on it though, so its still a theoretical concept:

  • For each url containing "/admin/", Symfony router will serve backend twig-php pages as it is designed to do. For any other url however, a simple controller will just serve the angular app.

  • On the other hand, in the front end, Angular router will work as it would normally do. However, if a url contains "/admin/", it will be handled by an Angular component that will simply change window.location.href within its OnInit function to redirect to Symfony backend.

2
symfonyangularrouting
Welcome to Stack Overflow! Please edit your question a bit so we know what's happening. Post the minimum amount of code required to produce the problem. - Athena

2 Answers

1
votes

The angular app should be built separately, Symfony is a back end framework and isn't a good choice to use for building angular apps.

I created an example of how to use the 2 together, with FOS User Bundle and FOS OAuth Server Bundle to deal with authentication.

It's a couple of years old now, but should give you a good idea of how to go about using them together.

Github is down right now, but I'll update this with a link when it comes back.

edit: https://github.com/mbates/Symfony2-AngularJs

0
votes

There is AngularUI routing framework available in AngularJS for routing purposes in your AngularJS application. You can use Angular UI-Routing framework to govern your application's frontend while Symfony2 take care of the backend of your application. Angular JS UI-Routing URL's will looks like this,

www.domain.com/#page1

instead of this,

www.domain.com/page1

After the hash (#) the url will not be a part of Symfony2. The place where you map Symfony2 urls with Angular UI-Router urls will be within states. Take a look at this tutorial. I hope AngularUI will solve your issue :)

Cheers!