I built the Angular application completely outside in another repository from the Symfony backend PHP project. I used a seed project: https://github.com/AngularClass/angular2-webpack-starter
Currently as we intend to replace the functionality of the Frontend Form Areas (heavy jQuery / JavaScript)
- We are building each section at the very least as an NgModule (hopefully all in one app). a. We are looking into the HMR (Hot Module Replacement) of the seed project as a way whereby we can have all of the NgModules powering the frontend just getting deployed to their respective areas.
/route must point directly to the compenent you want your Symfony page to display in Angular.
Using the seed project tasks (we aren't currently using AoT, but the seed can) we build the code for copy/paste into Symfony.
npm run build:prod
Next we need to copy the dist files that we built in the previous step...
cp *.js ../your/project/web/assets/hotels-ng/
Now we need to move over to the Symfony side of the project.
We have hopefully locally tested the application with it outside of Symfony (much easier development this way). You will need
at least the NelmioCORSBundle or handle CORS requests yourself for development unless you have both the Angular and Symfony on the same
local domain name. I just used npm run server so that was simply an IP Address:Port... nothing fancy. I also had to comment out the
security.yml black listing all routes for login.
So inside the above dist folder we had our index.html file. This has a few important pieces of code we need...
Namely, we need (I found out after some testing)...
<base href="/"> => <base href="{{ app.request.basePath }}">
Keep in mind, it will add a / using the Angular Router to the Symfony path. This is an issue to workout.
Hash (#) routing might be better for an embedded Angular route, or teaching symfony how to deal with an extra slash on Angular routes.
The <script> tags before the <body> tag as those three files are your Angular application compiled and the
same three files we copied with the cp *.js from above.
You can take note of the CSS and JavaScript files I have in the index.html as those will either need to be in
a base template, or otherwise accessible through Symfony / Twig. I do end up needing two of them in my
angular-hotels.html.twig template as they aren't in base.
So you can see in the angular-hotels.html.twig what I have brought over as far as specifically for this area to now become an
SPA (Single-Page Application). Currently, I'm not using the user's uuid, but passed it in in-case I need to later as I thought
Authorizing the Frontend Application would be needing to be done as an API with a token. Background: We have sealed ALL but a few
white listed routes from requiring a login so we can be sure on our "endpoints" (the Symfony API points are a rough start to an API)
that we have a user to save reservations to, and show only their list of reservations and so on.
For completeness, I have added the controller action here so you can see no magic happening. HotelsController.php
Here are some takeaways for me... Angular / Symfony / Twig / Community
- I was extremely surprised and pleased with how little effort actually needed to be made for Symfony to spit an Angular app to the
frontend. From what I had read, I needed to change all my
{{ }}to{[{ }]}(Angular) or{{ twig_variable | raw }}(Symfony). - I was happy to not need to build the full API Token authorization and test it as well with this push. I re-wrote the Twig/JavaScript version of our Hotel Search / Reservation in about 8 weeks.
- There is very little documentation/tutorials of people bringing Symfony as the backend and Angular as the frontend. With the latest releases of both (2+ or 4+ and 3+ respectively).
- Didn't end up needing the NelmioCORSBundle (handles cross-site scripting) outside of development as once I put it inside the Twig template, it was then being hosted on the same domain and box.
- I was able to fix some bugs that were present in the Twig version of this section of our application simply by moving over to Angular. I let a framework handle the stuff that should be common.
Overall very pleased with the experience, and will continue to do it this way until they truly are an API backend and a frontend.
Always open to PR's and Feedback on my Gist(s).
@BallisticPain (Twitter, Github)
Vortex Revolutions LLC / upCode L.L.C.