I have a chrome extension where I want to embed my angular application in an IFrame. So we navigate to specific sites, and we add the IFrame into content of the document. Like the following…
var $j = jQuery.noConflict(true);
var iframeSource = chrome.extension.getURL(‘coolcomponent/dist/coolcomponent/index.html’);
// Create the iframe
var iframe = document.createElement(‘iframe’);
iframe.style.width = 450 + ‘px’;
iframe.style.height = 200 + ‘px’;
So we embed the angular app into the dcoument, but the content of my component is not displaying.This is my index.html.
The “P” tag content displays perfectly, but the content of app-root does not display.
I have tried all kinds of experiments,but the content does not display. Everything works wonderful if I run the application with “ng serve”.
I am obviously missing something here. I saw this artical with Angular running in the background of the Chrome Extension.
Any suggestions would be greatly appreciated.