Integrating FOSJsRoutingBundle

Hello, there is something I don't understand with FosJsRouting ...
I installed it, and I configured it like this:

<b>Routing.js</b>

// assets/Routing.js

const routes = require('../../public/js/fos_js_routes.json');
const Routing = require("../../public/bundles/fosjsrouting/js/router");

Routing.setRoutingData(routes);

module.exports = Routing;

<b>app.js</b>

$(document).ready(function(){

    var Routing = require('./Routing.js');
    console.log(Routing.generate("validation_index"));
})

And in my <b>base.html.twig</b>, before all my others javascript files :

<script src="{{ asset('bundles/fosjsrouting/js/router.min.js') }}"></script>
<script src="{{ path('fos_js_routing_js', { callback: 'fos.Router.setData' }) }}"></script>

If I launch the web page, I've :

<b>Uncaught Error: The route "validation_index" does not exist.
</b>
But if I do the same thing in a <b>twig template</b> in the <b>javascript block</b> :

$(document).ready(function(){

    var Routing = require('./Routing.js');
    console.log(Routing.generate("validation_index"));
})

it works...
So how can I make this work from my <b>app.js</b>?
Knowing that when I debug to see the list of available routes, I have the desired route

Hi Kiuega !

Hmm. So let me try something "simple" first: On the validation_index route, have you added "expose"=true? https://symfony.com/doc/master/bundles/FOSJsRoutingBundle/usage.html#generating-uris

If you haven't, that's your problem :). If you HAVE, well, then obviously it's something else. And, one thing stands out. In assets/Routing.js, you have const routes = require('../../public/js/fos_js_routes.json'); That means you are running fos:js-routing:dump to dump the JSON file. In that case, if this route is new, then you would need to run that command again to update the file. But on this topic, I also noticed that you have <script src="{{ path('fos_js_routing_js', { callback: 'fos.Router.setData' }) }}">. These should not both be needed. Sometimes I will have this last one, but only in dev mode - to basically make sure that if my dumped JSON files is missing any, they will be added here (in dev only, but it would still require you setting the Router as a global variable... and having your script tags in the right order). Oh, and the line above this (the script tag for router.min.js) isn't needed at all if you're properly importing the Router like you are. This is a long way of saying that you seem to be importing all the Routing stuff the "proper" way in assets/Routing.js... but also the "easier" way in base.html.twig. These two might be colliding in some way :).

Cheers!

Thanks for your help ! I had to make a dump !

Does this really works with Symfony 4?? Because this:

php bin/console fos:js-routing:dump --format=json --target=public/js/fos_js_routes.json

is not working for me here. The file is empty.

Hey Carlos

Yea, that bundle works in Symfony4 since this version: https://github.com/FriendsO...

Probably you forgot to specify routes as public? https://symfony.com/doc/mas...

Cheers!

It generates the file, but it results like this:

{"base_url":"","routes":[],"prefix":"","host":"localhost","scheme":"http"}

When I use the "php bin/console debug:router" it shows me all the routes that I've defined.

Maybe the documentation on https://symfony.com/doc/mas... is outdated? Look at the step 2, for example. I don´t think that now with Symfony4 I need to change this AppKernel.php file, even because it doesn´t exists. Maybe now it is the Kernel.php file:

public function registerBundles()
{
$contents = require $this->getProjectDir().'/config/bundles.php';
foreach ($contents as $class => $envs) {
if (isset($envs['all']) || isset($envs[$this->environment])) {
yield new $class();
}
}
}

From this method, I went to /config/bundles.php and the FOS\JsRoutingBundle\FOSJsRoutingBundle it´s already there:

[...]
FOS\JsRoutingBundle\FOSJsRoutingBundle::class => ['all' => true],

And app/config/routing.yml also doesn´t exists anymore. I think that it was replaced by config/routes/fos_js_routing.yaml, since it has the same content that was mentioned:

fos_js_routing:
resource: "@FOSJsRoutingBundle/Resources/config/routing/routing.xml"

There´s more people saying the same:

https://github.com/FriendsO...

Maybe anyone here knows the answer?? Thanks

Ok, I think I found the problem. Here it is:

Checking how the FOSJsRoutingBundle I found the ExposedRoutesExtractor.php , that checks if "isRouteExposed" on "getRoutes()" method.

I found that I needed to expose my routes by setting the 'exposed' = true on the @Route, like this:

/**
*
* @Route("/bse/pessoa/findByNome/{str}", name="bse_pessoa_findByNome", methods={"GET"}, options = { "expose" = true })
*
*/
public function findByNome($str = null)
{
[...]

But, even after that, FOSJsRoutingBundle continues not showing anyone.

In this Issue (https://github.com/FriendsO..., they said that routes defined by annotations (FOSRest routes???) was not caught by this ExposedRoutesExtractor, only if they were exposed in yaml.

So I dit it. On config/routes/annotations.yaml I added:

controllers:
resource: ../../src/Controller/
type: annotation
options:
expose: true

Voila.

php bin/console fos:js-routing:debug now shows all my routes.

Hey Carlos

Nice findings! But you may not want to "expose" all your routes, so what you can do is to expose manually each of the routes that you want them as public, and then run this command (so your routes file gets updated)
bin/console fos:js-routing:dump --format=json --target=public/js/fos_js_routes.json

Probably there is a way to not have to run that command every time you add a new route but at the moment I don't know how.

Cheers!