Webpack FOSJsRoutingBundle与Symfony Flex和Angular的集成

f87krz0w 于 2023-05-29 发布在 Webpack

关注(0)|答案(3)|浏览(140)

我无法让**FOSJsRoutingBundle与Symfony Flex、Webpack和AngularJS配合使用。
我已经在Symfony 3和AngularJS中使用这个包很长时间了，从来没有出现过问题，但是随着Symfony Flex中webpack的引入，设置变得更加复杂。不幸的是，FOSJsRoutingBundle版本2.2的文档并不清楚。
您可以找到此bundle here的最新文档。
我使用了FOSJsRoutingBundle**，这样我的Angular HTTP请求就可以使用生成的路由而不是绝对URL。

问题

我已经通过 composer 设置这个捆绑文件。然后将路由转储到位于code/assets/fos_js_routes.json的json文件中。这个文件中生成的路由是有效的，也是我期望看到的。
因为我使用Angular，所以我想在一个单独的文件中做路由的初始声明，这样我所有的Angular控制器都可以使用Routing.，而不必在这些文件中做任何进一步的工作。

FOS设置文件/code/assets/js/fos_js_router.js（Following documentation）

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');
             }
         ])
});

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。
我需要做些什么不同的事情才能在AngularJS文件中使用let url = Routing.generate('test_route_name');？

webpack

来源：https://stackoverflow.com/questions/54053137/webpack-fosjsroutingbundle-integration-with-symfony-flex-and-angular

3条答案

按热度按时间

wh6knrhe1#

在assets/js目录中创建文件router.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",
})

添加新的加载器到您的webpack：

.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 });

希望能帮上忙。干杯

赞(0）回复(0）举报 2023-05-29

oymdgrw72#

简单的修复来获得此工作：

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）回复(0）举报 2023-05-29

ff29svar3#

使用Webpack，您不需要做所有这些。只需将此添加到您的webpack：

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

然后通过添加来使用它：

import Routing from 'fos-router';

赞(0）回复(0）举报 2023-05-29

我来回答

Webpack FOSJsRoutingBundle与Symfony Flex和Angular的集成

问题

错误

3条答案

相关问题

热门标签

最新问答