Webpack FOSJsRoutingBundle integration with Symfony Flex and Angular

Question

I cannot get FOSJsRoutingBundle to work with Symfony Flex, Webpack and AngularJS.

I\'ve been using this bundle in Symf

Answer 1

Simple fix to get this working:

const routes = require('../../assets/fos_js_routes.json');
import Routing from '../../vendor/friendsofsymfony/jsrouting-bundle/Resources/public/js/router.min.js';

Routing.setRoutingData(routes);
window.Routing = Routing;

Answer 2

Create file router.js in your assets/js directory. Next, fill router.js with following content:

const routes = require('./fos_js_routes.json');
const router = require('../../vendor/friendsofsymfony/jsroutingbundle/Resources/public/js/router.min.js');
router.setRoutingData(routes);
module.exports = router;

Provide new variable in your webpack.config.js like this:

.autoProvideVariables({
    "Routing": "router",
})

Add new loader to your webpack:

.addLoader({
    test: /jsrouting-bundle\/Resources\/public\/js\/router.min.js$/,
    loader: "exports-loader?router=window.Routing"
})

Finally extend webpack config with:

let config = Encore.getWebpackConfig();

config.resolve.alias = {
'router': __dirname + '/assets/js/router.js',
};

module.exports = config;

It should make Routing a global object so you can use it in other js files like this:

let url = Routing.generate('some_route_name', { param: value });

Hope it helps. Cheers.