Popup to content-script: Could not establish connection. Receiving end does not exist

Question

I would like to send a message from popup to content script and to log an object once I get the response from this end but I'm getting the following error: Could not establish connection. Receiving end does not exist.

Why might this error be occurring and how should I fix it? Any help would be appreciated.

Besides the below code, I tried the workaround suggested on this link (https://www.youtube.com/watch?v=jooc7xMkz2E), by implementing the communication between the popup and content-script with long-lived connections and adding an event listener on load to the browser window but it did not worked either.

Implemented a similar function for sending the message to the background but without passing the tabs as an argument and it is logging the response from the background to the popup but not from content-script to popup, the error appears when I try to send a message from popup to content script and logging the respective response.

Below are the main project files.

Popup.ts:

ngOnInit(): void {
      ...
      this.sendMessageToContentScript();
   }
   sendMessageToContentScript() {
        chrome.tabs.query({currentWindow: true, active: true} , function (tabs){
            var activeTab = tabs[0];
            chrome.tabs.sendMessage(activeTab.id, { command: 'HelloFromPopup1' }, (response) => {
                var parsed_res = JSON.parse(response);
                console.log("content-script: " + parsed_res);
            });
        });
    }

content_script.ts:

chrome.runtime.onMessage.addListener(
  function(msg, sender, sendResponse) {
    if (msg.command == "HelloFromPopup1") {
          var personal_data = {
          firstname: "Max",
          lastname: "Hennigan",
          role: "role",
          location: "United Kingdom"
     };
      sendResponse(JSON.stringify(personal_data));
    }
  }
);

Manifest.json:

{
    "name": "Extension name",
    "version": "1.0",
    "description": "Desc",
    "manifest_version": 2,
    "permissions": [
        "activeTab",
        "webNavigation",
        "tabs",
        "storage",
        "http://*/",
        "https://*/"
    ],
    "background": {
        "persistent": true,
        "scripts": [
            "background.js",
            "runtime.js"
        ]
    },
    "browser_action": {
        "default_popup": "index.html#/home",
        "default_icon": "assets/icons/favicon-32x32.png",
        "default_title": "title"
    },
    "content_scripts": [
        {
          "matches": [  "<all_urls>" ],
          "js": [ "content_script.js" ]
        }
      ],
    "content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'"
}

app-routing.module.ts:

const routes: Routes = [
  {path: 'home', component: HomeComponent}
];

@NgModule({
  imports: [RouterModule.forRoot(routes, {useHash: true})],
  exports: [RouterModule]
})

Edited:

Following the suggestion of wOxxOm on the comments, I've tried to add programmatic injection to my popup.ts but it is giving me a response of "1" from the content script, it is not logging the object as it should.

I have tried it like this:

Popup.ts (with programmatic injection):

sendMessageToContentScript() {
          chrome.tabs.query({currentWindow: true, active: true} , function (tabs){
            var activeTab = tabs[0];
            chrome.tabs.executeScript(activeTab.id,  {file: "content_script.js" }, function (response) {
              if (!chrome.runtime.lastError) {
                var parsed_res = JSON.parse(response[0]);
                console.log("content-script: " + parsed_res);
              }
            });
        });
    }

Content-script for this programmatic injection part is equal as the content-script file of my non edited part of the question.