Интеграция Webpack FOSJsRoutingBundle с Symfony Flex и Angular

Я не могу заставить FOSJsRoutingBundle работать с Symfony Flex, Webpack< /strong> и AngularJS.

Я использую этот пакет в Symfony 3 с AngularJS в течение долгого времени, и никогда не возникало проблем, но с появлением веб-пакета в Symfony Flex настройка стала более сложной. К сожалению, документация для FOSJsRoutingBundle версии 2.2 не ясна.

Текущую документацию по этому пакету можно найти здесь.

Я использую FOSJsRoutingBundle, чтобы мои HTTP-запросы Angular могли использовать сгенерированные маршруты, а не абсолютные URL-адреса.

Эта проблема

Я установил этот пакет, как задокументировано через composer. Затем маршруты сбрасываются в файл json, расположенный по адресу code/assets/fos_js_routes.json. Сгенерированные маршруты в этом файле действительны и соответствуют тому, что я ожидаю увидеть.

Поскольку я использую Angular, я хочу сделать начальное необходимое объявление маршрутизации в отдельном файле, чтобы все мои контроллеры Angular могли использовать Routing. без необходимости выполнять какую-либо дальнейшую работу в этих файлах.

Файл установки 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);

Образец файла Angular /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');
             }
         ])
});

Конфигурация веб-пакета

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 %}

Ошибка

Из приведенной выше настройки я получаю test.js: ReferenceError: Routing is not defined at в своих файлах AngularJS.

Что мне нужно сделать по-другому, чтобы я мог использовать let url = Routing.generate('test_route_name'); в своих файлах AngularJS?


webpack angularjs symfony symfony4 symfony-flex
person Dan    schedule 05.01.2019    source источник

Ответы (2)


arrow_upward
2
arrow_downward

Создайте файл router.js в вашем каталоге assets/js. Затем заполните router.js следующим содержимым:

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;

Укажите новую переменную в вашем webpack.config.js следующим образом:

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

Добавьте новый загрузчик в ваш веб-пакет:

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

Наконец, расширьте конфигурацию веб-пакета с помощью:

let config = Encore.getWebpackConfig();

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

module.exports = config;

Это должно сделать маршрутизацию глобальным объектом, чтобы вы могли использовать его в других файлах js, например:

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

Надеюсь, поможет. Ваше здоровье.

person Zorpen    schedule 05.01.2019

arrow_upward
0
arrow_downward

Простое исправление, чтобы заставить это работать:

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;
person Dan    schedule 05.01.2019