This code renders an Angular application within an iframe by combining rendered HTML, extracted scripts and styles, and dynamically loading additional JavaScript files. It returns a promise that resolves with the complete HTML containing the embedded Angular application.

Run example

npm run import -- "Display angular modules in jupyter"

Display angular modules in jupyter

var importer = require('../Core');
var vm = require('vm');
var fs = require('fs');
var path = require('path');
var listInProject = importer.import("list files in project");
var renderer = importer.import("render Angular modules");

var renderer;
function displAngular(project, url) {
    var innerHtml = '';
    var scripts = '';
    process.chdir(path.join(project));
    module.paths.unshift(path.join(project, 'node_modules'));
    require('module').Module._initPaths();
    process.argv = [(process.argv0 = path.join(project, '.server', 'render-service.js'))];
    return new Promise((resolve, reject) => {
        renderer(url, (err, html) => {
            if (err) {
                return reject(err);
            }
            var content = fs.readFileSync(path.join(project, 'public', 'index.html')).toString();
            scripts = getScriptsAndStyles(content);
            innerHtml = html;
            return resolve(innerHtml);
        });
    })
        .then(() => listInProject(project, '**/public/assets/0.*.js'))
        .then(paths => paths.map(p => '<script defer>' + fs.readFileSync(p) + '</script>')[0])
        // TODO convert to using the same type of template system as angular-cli now that typescript is becoming more relevant here.
        .then(chunks => ({
            html: `
<div id="container" style="display:block; width:100%;position:relative;">
<iframe id="cell1" style="position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;border:0;"></iframe>
</div>
<script defer>
var ifrm = document.getElementById('cell1');
var doc = ifrm.contentWindow || ifrm.contentDocument.document || ifrm.contentDocument;
doc.document.open();
doc.INITIAL_PATH=` + JSON.stringify('' + url) + `;
doc.SOCKIFY_SERVER='http://local:8000';
doc.document.write(decodeURI(` + JSON.stringify(encodeURI(innerHtml)) + `));
var contHeight;
contHeight = setInterval(function () {
    if(document.getElementById("container") == null) {
        console.log('Resizing canceled');
        clearInterval(contHeight);
    } else {
        doc.document.getElementsByTagName('app-root')[0].style.display = 'block';
        document.getElementById("container").style.height = (doc.document.getElementsByTagName('app-root')[0].offsetHeight + 40) + 'px';
    }
}, 500);
</script>`, scripts: scripts, chunks: chunks
        }));
};
module.exports = displAngular;
displAngular;

const importer = require('../Core');
const vm = require('vm');
const fs = require('fs');
const path = require('path');
const { listFilesInProject, renderAngularModule } = importer.import({
  'list files in project': 'listFilesInProject',
 'render Angular modules':'renderAngularModule',
});

const template = fs.readFileSync(path.join(__dirname, 'template.html'), 'utf8');

/**
 * Renders an Angular module and returns the HTML content.
 * @param {string} project - The project path
 * @param {string} url - The URL of the Angular module
 * @returns {Promise} A promise that resolves to the rendered HTML content
 */
function displayAngularModule(project, url) {
  return new Promise((resolve, reject) => {
    const renderer = renderAngularModule(url, (err, html) => {
      if (err) {
        return reject(err);
      }

      const content = fs.readFileSync(path.join(project, 'public', 'index.html'), 'utf8');
      const scripts = getScriptsAndStyles(content);
      const innerHtml = template.replace('{{ innerHtml }}', html);
      return resolve({ innerHtml, scripts });
    });
  })
   .then(() => listFilesInProject(project, '**/public/assets/0.*.js'))
   .then(paths => paths.map(p => '')[0])
   .then(scripts => ({
      html: template.replace('{{ scripts }}', scripts),
      scripts,
      chunks: renderAngularModule.getChunks(),
    }));
}

module.exports = displayAngularModule;

This code defines a function displAngular that renders an Angular application within an iframe.

Here's a breakdown:

1. Initialization:

   • It imports necessary modules: Core, vm, fs, path, list files in project, and render Angular modules.
   • It sets up the working directory to the provided project path and modifies module.paths to include the project's node_modules directory.

2. Rendering:

   • It calls the renderer function (imported earlier) to render the Angular application for the given url.
   • It reads the content of index.html from the project's public directory and extracts scripts and styles using the getScriptsAndStyles function.

3. Combining Content:

   • It combines the rendered HTML (html), extracted scripts (scripts), and a placeholder for the Angular application's initial path and server URL.

4. Dynamic Script Loading:

   • It uses listInProject to find all JavaScript files in the public/assets/0.*.js pattern and loads them dynamically as <script> tags.

5. Iframe Integration:

   • It constructs an HTML string with an iframe element and injects the combined content into the iframe's document.

6. Return Value:

   • It returns a promise that resolves with the complete HTML string containing the rendered Angular application within an iframe.

Let me know if you have any more questions.