FOSCommentBundle not appearing

Question

I'm trying to use the FOSCommentBundle to implement a comment thread section in my application. But I've followed the guide for installing it https://github.com/FriendsOfSymfony/FOSCommentBundle/blob/master/Resources/doc/index.md and nothing is appearing for me. I've created both the comment and thread entity classes correctly from what I can see

<?php

namespace AppBundle\Entity;

 use Doctrine\ORM\Mapping as ORM;
 use FOS\CommentBundle\Entity\Comment as BaseComment;

/**
 * @ORM/Entity
 * @ORM\ChangeTrackingPolicy("DEFERRED_EXPLICIT")
 */
class Comment extends BaseComment
{
/**
 * @ORM\Id
 * @ORM\Column(type="integer")
 * @ORM\GeneratedValue(strategy="AUTO")
 */
protected $id;

/**
 * @var Thread
 * @ORM\ManyToOne(targetEntity="AppBundle\Entity\Thread")
 */
protected $thread;
}

And

<?php
 namespace AppBundle\Entity;

use Doctrine\ORM\Mapping as ORM;
use FOS\CommentBundle\Entity\Thread as BaseThread;

/**
 * @ORM\Entity
 * @ORM\ChangeTrackingPolicy("DEFERRED_EXPLICIT")
 */
class Thread extends BaseThread
{
/**
 * @var string $id
 *
 * @ORM\Id
 * @ORM\Column(type="string")
 */
protected $id;
}

I've also issued the command in the command line php bin/console doctrine:schema:update --force, but have not noticed any new tabled in my MySQL Workbench.

My index.html.twig file is also laid out like

{% extends 'base.html.twig' %}

{% block body %}
{% include '@FOSComment/Thread/async.html.twig' with {'id': 'foo'} %}
{% endblock %}

{% block javascripts %}
<script src="http://code.jquery.com/jquery-3.2.1.js"></script>
{% endblock %}

So that also looks all good to me. And yet, nothing appears at the end. Could someone with more knowledge on this bundle let me know where I potentially went wrong? If you need to see any more code I'd be more than happy to show you.

Also this is how the JavaScript code looks in the page's source code

// thread id
var fos_comment_thread_id = 'foo';
var fos_comment_thread_view = 'tree';

// api base url to use for initial requests
var fos_comment_thread_api_base_url = '/api/threads';

// Snippet for asynchronously loading the comments
(function() {
    var fos_comment_script = document.createElement('script');
    fos_comment_script.async = true;
    fos_comment_script.src = '/bundles/foscomment/js/comments.js';

    (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(fos_comment_script);
})();

Answer 1

I'm using Symfony 3.4 and I run into the same issue. I hope you can resolve it by following these steps:

1. Copy the vendor/friendsofsymfony/comment-bundle/Resources/public/js/comments.js to web/bundles/foscomment/js/comments.js

2. Copy the vendor/friendsofsymfony/comment-bundle/Resources/views/* to app/Resources/FOSCommentBundle/views/*

3. Wrap a javascript block around the <script>-Tags of the file async.html.twig:

   {% block javascripts %}
   <script>
   // thread id
   var fos_comment_thread_id = '{{ id }}';
   var fos_comment_thread_view = '{{ view|default('tree') }}';
   
   // api base url to use for initial requests
   var fos_comment_thread_api_base_url = '{{ path('fos_comment_get_threads') }}';
   
   // Snippet for asynchronously loading the comments
   (function() {
       var fos_comment_script = document.createElement('script');
       fos_comment_script.async = true;
       fos_comment_script.src = '{{ asset('bundles/foscomment/js/comments.js') }}';
   
       (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(fos_comment_script);
   })();
   </script>
   {% endblock %}
   

4. Take care, that jQuery is loaded before this javascript.