Symfony 带符号2的角度2

如何将angular 2引入现有的symfony 2项目？所以我有一个子页面，我想创建一个小的angular 2应用程序。我已将所有源代码存储到acme bundle公用文件夹中。 我的子页面是

/foo/bar

，我的配置如下所示：

基本细枝模板：

{% block javascripts %}
{{ parent() }}

<!-- 1. Load libraries -->
<!-- IE required polyfills (from CDN), in this exact order -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.35.0/es6-shim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.16/system-polyfills.js"></script>
<script src="https://npmcdn.com/angular2/es6/dev/src/testing/shims_for_IE.js"></script>

<script src="https://code.angularjs.org/tools/system.js"></script>
<script src="https://code.angularjs.org/tools/typescript.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.13/angular2-polyfills.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.13/Rx.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.13/angular2.dev.js"></script>

<!-- 2. Configure SystemJS -->
<script>
    System.config({
        transpiler: 'typescript',
        typescriptOptions: {
            inlineSourceMap: true,
            emitDecoratorMetadata: true
        },
        packages: {
            'app': {
                defaultExtension: 'ts'
            }
        }
    });
    System.import({% block mainNgClass %}'/PATH/TO/MAIN.TS'{% endblock %})
            .then(null, console.error.bind(console));
</script>
{% endblock %}

我得到这个错误：

获取：…/foo/bar/dragula 404未找到

总之，如果angular应用程序在根路径之外，那么会有很多问题，处理这个问题的最佳实践是什么

{% block mainNgClass %} '{{ asset('bundles/acme/ListFlow/main.ts') }}' {% endblock %}

{% block content %}
    <list-flow>Loading...</list-flow>
{% endblock %}

import {Component} from 'angular2/core';

@Component({
    selector: 'list-flow',
    template: `<div>Hello world</div>`
})
export class ListFlow {

}

import {DragulaService, Dragula} from "../../ng2-dragula/ng2-dragula";

@Component({
    selector: 'list-flow',
    directives: [Dragula],
    viewProviders: [DragulaService],