Интеграция веб-пакетов FOSJsRoutingBundle с Symfony Flex и Angular

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

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

Вы можете найти текущую документацию для этого пакета здесь.

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

Эта проблема

Я установил этот пакет, как описано в документации композитора. Затем маршруты сбрасываются в файл 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);

Образец углового файла /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 Config

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?

Источник

3 ответа

Решение

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

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;
Источник

Создать файл 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"
})

Наконец, добавьте в конфигурацию webpack:

let config = Encore.getWebpackConfig();

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

module.exports = config;

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

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

Надеюсь, поможет. Приветствия.

Источник

С Webpack вам не нужно делать все это. Просто добавьте это в свой веб-пакет:

      const FosRouting = require('fos-router/webpack/FosRouting');
Encore.addPlugin(new FosRouting())

Затем используйте его, добавив:

      import Routing from 'fos-router';
Источник
Другие вопросы по тегам