Symfony4集成FosJsRoutingBundle遇路由加载异常问题求助

Hey there! I’ve dealt with this exact headache when using FosJsRoutingBundle in Symfony 4—since Symfony switched to the Flex structure, some of the setup steps are different from older versions. Let’s go through the most common fixes to get your exposed routes loading into JS properly:

1. Double-Check Bundle Registration #

First, make sure the bundle is properly registered in your Symfony 4 project. Open config/bundles.php and confirm this line exists:

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

If it’s missing, add it and clear your cache right after—this is an easy step to overlook with Flex.

2. Verify Route Exposure #

You need to explicitly mark routes you want to access via JS with the expose: true option.

YAML Route Example (config/routes.yaml): #

app_user_profile:
    path: /user/profile
    controller: App\Controller\UserController::profile
    options: { expose: true }

Annotation Route Example: #

In your controller method, add the option to the @Route annotation:

/**
 * @Route("/user/profile", name="app_user_profile", options={"expose"=true})
 */
public function profile()
{
    // Controller logic
}

3. Generate the Route Asset File #

This is the step that trips up most people moving from older Symfony versions. You need to dump the exposed routes into a JS/JSON file that your frontend can load. Run this command in your project root:

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

Symfony 4 uses public/ as the web root (instead of the old web/ directory), so the target path needs to point there.

4. Fix Your Template Script Includes #

You mentioned loading router.js, but you also need to load the dumped routes file—and in the right order! Update your Twig template to include both scripts correctly:

<head>
    <!-- Load the FOS Router first -->
    <script src="{{ asset('bundles/fosjsrouting/js/router.js') }}"></script>
    <!-- Then load the dumped routes file -->
    <script src="{{ asset('js/fos_js_routes.json') }}"></script>
</head>

If you didn’t specify a --target in the dump command, the default file is at public/bundles/fosjsrouting/js/fos_js_routes.js—adjust the asset path accordingly.

5. Clear Your Cache (Yes, Again!) #

Symfony’s cache can hold onto old route data, so clear it for both dev and prod environments to be safe:

# For development
php bin/console cache:clear --env=dev

# For production (if you're testing there)
php bin/console cache:clear --env=prod

6. Test It Out #

Open your browser’s developer console and try generating a route to confirm it works:

console.log(Router.generate('app_user_profile'));

If this returns the correct URL, you’re all set! If not, check the console for 404 errors (which mean your script paths are wrong) or other JS errors that might point you to the issue.

内容的提问来源于stack exchange，提问作者miltone