Webpack FOSJsRoutingBundle与Symfony Flex和Angular的集成 [英] Webpack FOSJsRoutingBundle integration with Symfony Flex and Angular

问题描述

我无法 FOSJsRoutingBundle 与 Symfony Flex一起使用，Webpack 和 AngularJS .

我已经在Symfony 3和AngularJS中使用此捆绑包很长时间了，从来没有问题，但是随着Symfony Flex中webpack的引入，设置变得更加复杂.不幸的是，有关FOSJsRoutingBundle 2.2版的文档尚不清楚.

I've been using this bundle in Symfony 3 with AngularJS for a long time and there's never been an issue but with the introduction of webpack in Symfony Flex, the setup has become more complex. Unfortunately the documentation for FOSJsRoutingBundle version 2.2 isn't clear.

您可以在此处找到此捆绑包的当前文档.

You can find the current documentation for this bundle here.

我正在使用 FOSJsRoutingBundle ，以便我的Angular HTTP请求可以使用生成的路由，而不是绝对URL.

I am using the FOSJsRoutingBundle so that my Angular HTTP requests can use the generated routes rather than absolute URLs.

我已按照作曲家的说明设置了此捆绑包.然后将路由转储到位于code/assets/fos_js_routes.json的json文件中.此文件中生成的路由是有效的，并且我希望看到它.

I have setup this bundle as documented through composer. The routes are then dumped to a json file located at code/assets/fos_js_routes.json. The generated routes in this file are valid and what I expect to see.

当我使用Angular时，我想在单独的文件中进行路由的初始必需声明，以便我所有的Angular控制器都可以使用Routing.，而不必在这些文件中进行任何进一步的工作.

As I am using Angular I want to do the initial required declaration of the Routing in a separate file so that all of my Angular controllers can use the Routing. without having to do any further work in those files.

FOS设置文件 /code/assets/js/fos_js_router.js(文档)

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

Routing.setRoutingData(routes);

---

示例角度文件 /code/assets/js/apps/default/controller/test.js

(function () {

    'use strict';

    angular.module('test')
    .controller(
        'TestCtrl',
        ['$scope', '$http',
            function ($scope, $http) {

                let url = Routing.generate('test_route_name');
             }
         ])
});

---

Webpack配置

var Encore = require('@symfony/webpack-encore');

Encore
    .setOutputPath('public/build/')
    .setPublicPath('/build')
    .addEntry('app', './assets/js/app.js')
    .addEntry('app_fos_router', [
        './assets/js/fos_js_router.js'
    ])
    .addEntry('app_angular', [
        './assets/js/apps/default/app.js', // angular app setup
        './assets/js/apps/default/routes.js', // angular routes setup
        './assets/js/apps/default/controller/test.js' // angular where Routing is needed
    ])
    .enableSingleRuntimeChunk()
    .cleanupOutputBeforeBuild()
    .enableBuildNotifications()
    .enableSourceMaps(!Encore.isProduction())
    .enableVersioning(Encore.isProduction())
;

module.exports = Encore.getWebpackConfig();

---

前端树枝模板

{% extends 'base.html.twig' %}

{% block title %}Test{% endblock %}

{% block javascripts %}
    {{ encore_entry_script_tags('app') }}
    {{ encore_entry_script_tags('app_fos_router') }}
    {{ encore_entry_script_tags('app_angular') }}
{% endblock %}

{% block body %}
    <div ng-app="test" ui-view="content"></div>
{% endblock %}

---

错误

通过上述设置，我在AngularJS文件中得到了test.js: ReferenceError: Routing is not defined at.

---

The Error

From the above setup I get test.js: ReferenceError: Routing is not defined at in my AngularJS files.

我需要做些什么以使我可以在AngularJS文件中使用let url = Routing.generate('test_route_name');?

What do I need to do differently so that I can make use of let url = Routing.generate('test_route_name'); in my AngularJS files?

推荐答案

简单的修复方法可以使其正常工作:

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;

这篇关于Webpack FOSJsRoutingBundle与Symfony Flex和Angular的集成的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！