Интеграция FOSJsRoutingBundle в Webpack с Symfony Flex и Angular - PullRequest
Новая
       41

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

0 голосов
/ 05 января 2019

Я не могу получить FOSJsRoutingBundle для работы с Symfony Flex, Webpack и AngularJS .

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

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

Я использую FOSJsRoutingBundle , чтобы мои угловые HTTP-запросы могли использовать сгенерированные маршруты, а не абсолютные 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);

Пример углового файла /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?

Ответы [ 2 ]

0 голосов
/ 05 января 2019

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

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;
0 голосов
/ 05 января 2019

Создайте файл 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;

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

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

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

...