StubbornShowaGuy StubbornShowaGuy - 1 month ago 19
Twig Question

Symfony2/Assetic: Use bundle annotation in asset path for imported HTML files

I am using Symfony 2.8 for my single page web application. I have a file

index.html.twig
which is supposed to serve all the required resources. Maybe it's obvious, but I want everything to be reloaded every time in the development environment, but not in the production environment. Said required resources is loaded from another bundle's
Resources
located in the
vendor
folder.

For this reason, I have configured Assetic in
config.yml
as stated below:

assetic:
debug: "%kernel.debug%"
use_controller:
enabled: "%kernel.debug%"
workers:
cache_busting:
enabled: "%kernel.debug%"


(I am assuming that debug is only enabled in the development environment)

I am loading the required CSS/JavaScript like this:

{% stylesheets
'@StubbornShowaBundle/Resources/public/stubborn.css'
'@StubbornShowaBundle/Resources/public/showa.css' %}
<link type="text/css" href="{{ asset_url }}" rel="stylesheet" />
{% endstylesheets %}
{% javascripts
'@StubbornShowaBundle/Resources/public/stubborn.js'
'@StubbornShowaBundle/Resources/public/showa.js' %}
<script src="{{ asset_url }}"></script>
{% endjavascripts %}


..which seems to be working as intended. However, I also have imported HTML files. Like this one:

<link href="{{ asset('@StubbornShowaBundle/Resources/public/polymer/my-component.html') }}" rel="import"/>


However, the above code does not work. The
@StubbornShowaBundle
annotation seems like it is not usable in the
asset
command. Also, there seems to be no "loop method" (or whatever you want to call that thing for
stylesheets
,
javascripts
and
images
) for HTML imports. If I link to the file in question directly, aside from stooping to an ugly hack that completely breaks uniformity with the surrounding code, I also break the whole Symfony/Assetic automatically taking care of resource reordering system and debugging becomes a mess. How do I solve this in a way that doesn't force me to re-dump the assets every time I change the code while debugging? (Is it possible to solve in a reasonable way?)

Answer

It seems that it is not possible to use HTML imports in Assetic the same way it's used for JavaScript, CSS and images. To quote from the manual:

You can use Assetic to process CSS stylesheets, JavaScript files and images.


What should be done instead depends very much on the case(the requirements) as far as I can see. Perhaps making everything into templates is also a possibility, but in my particular case I had to import Polymer components so making those HTML files into templates would have been a nightmare(because of the conflicting syntax, and whatnot). So I got the path using url, and used the method described in this answer.