Does Symfony3 love Angular2?

Some time ago Angular2 was released. I was excited because this framework is a breath of freshness in the frontend world. To start developing new apps using Angular2 a quick start created. A small problem with it is it may be hard to integrate the whole stack in an existing application. I decided to write a quick tutorial how to run Angular2 on Symfony application.

Requirements and dependencies

We need to have npm installed. How to install npm you can read in the docs. NodeJS applications can download its dependencies using package.json file. We will use it, too. Additionaly, we need to install the assets as absolute symbolic links. To do so type

We need to do it because the original files we keep in src/YourBundle/Resources/public directory. It is to make sure we will not need install the assets everytime we make changes.

Configuration

To make our life easier I will use the quick start project where we have configured all we need. What you need is to download it to the web folder. The package.json should be in location web/package.json. If you use git to download the project, remember to remove ./web/.git folder.

First of all, we need to clean it up a bit. Remove app and quickstart folder, index.html and styles.css files.

We removed the app folder because we will use the Symfony’s bundles folder where we keep all the assets anyway. The next step is updating package.json files to fit our needs. In the lint command we need to update the folder where ts files are kept. Change it to the ‘bundles’. We do not need the lite server, because we will use the default php built-in server (of course for development). The updated config file is below

The another file we need to update is systemjs.config.js file. We need to make two changes. First of all, replace the app folder to the new one (line no 14). Secondly, the path to the main.js file is changed and it will not be in bundles/main.js location, but in bundles/app/ts/main.js. Remember Symfony copies (in our case adds symlinks) fro src/SomeBunde/Resources/public folder to web/bundles/some folder. In my example, I have an AppBundle that’s why the path looks how it looks. It may be confising that’s why I want to stres it.
Here is the file after my tweaks.

Now it is time to install the NodeJS dependencies. Nothing can be simpler!

Developing the first component

The SystemJS expects the main.ts file in web/bundles/app/ts folder. It is time to create it!

The only thing we do here is loading the main module. We must add it, too.

This file is very simple, too. It just adds and lunches the AppComponent. In this component, we will answer a very important question: Does Symfony loves Angular?

We are almost done. Our Angular application should be working, but it is not loaded from Symfony. To do so we need to update the base.html.twig template to load all necessary libraries and our app.

In app/Resources/views/default/index.html.twig template we will ask the most important question today and check if it will answer.

The last thing left is to compile the ts files. In the web folder type

It will compile the files and wait for all the changes. It will automatically apply them so we can develop without thinking about recompiling. In another console run built in web server by typing

and open page http://127.0.0.1:8000/ in your browser. That’s it! We can clearly see that Symfony is in love with Angular!
I do not know what about you, but I am touched.

Summary

As you can see it is quite easy to use both Symfony and Angular in one project. If you want to see the final version, I added the final project to github.
You may experience some error logs similar to

while compiling the TypeScript from the command line. It happens because NodeJS gets the absolute path of files. If you install the assets with prod environment, it will not happen because in this case, it’ll copy the files – not add symlink which causes the problem. For now, I have no idea how to solve it. Maybe you have the idea? 🙂

Anyway, I hope I helped you and you enjoyed this post. Cheers!

About author

Hi! I am Bartek. I'm a PHP developer but I other languages are not scary to me. My hobby is security and I try to learn as much as it's possible how to not be hacked. I like to know how things work. After hours I like playing Dota2 :)
  • nicraM

    It work! Thanks

    • adminek

      I’m glad to hear that!

  • nicraM

    Hi,
    Works, but i wonder, why everything is installed in web directory? there are .json files and aren’t needed in production so shouldn’t be installed in app/Resources/public and linked/copy with assets?
    web folder, as Symfony says, shoud contain only necessary files

  • Oscar

    Hi, thanks for the article. I have a query: I followed the example and I get an error when I change to another path of my application. Example: In my home view (localhost/) the path ”./app/ts/main.js ” works correctly, the path to main.js is found in ‘localhost/bundles/myBundle/ts/main.js’ but in Another path ”localhost/otherFolder/” does not work because that main.js path is searched in ‘localhost/otherFolder/bundles/myBundle/ts/main.js’. I do not know if I was clear. I hope you can help me. Greetings (sorry for my English)

  • zitouni makrem

    Hello, what are the files that I need to modify to create a new component cdlt