2

I am using a Weblogic Application Server, where I have deployed my Angular 2application.

lets assume that the internal IP is http://127.0.0.1:7009/myapp, and I have set

But the application is exposed external from a Reverse Proxy at http://my.application.org/myapp2.

So we have 2 different context paths. This causes problems since I cannot find my front-end resources. How do we resolve such a problem?

1 Answer 1

0

This is the approach I am using for Legacy Angular projects. I have created a js file that is run after an ng-build.

const fs = require('fs');
const path = require('path');
const cheerio = require('cheerio');

const useProtocol = false;

const isAbsoluteUrl = filePath =>
    filePath.startsWith('/') || filePath.startsWith('http://') || filePath.startsWith('https://');

const performReplacement = (content) => {

    const environmentFilePath = path.join(__dirname, 'src', 'environments', 'environment.ts');

    const $ = cheerio.load(content);

    // Read the environment.ts file to get the APP_CONTEXT_ROOT and API_WEB_SERVER_BASE_PATH values
    const environmentContent = fs.readFileSync(environmentFilePath, 'utf8');
    const appContextRootMatch = environmentContent.match(/APP_CONTEXT_ROOT: ['"](.*?)['"]/);
    const appContextRoot = appContextRootMatch ? appContextRootMatch[1] : '';

    const apiWebServerBasePathMatch = environmentContent.match(/API_WEB_SERVER_BASE_PATH: ['"](.*?)['"]/);
    const apiWebServerBasePath = apiWebServerBasePathMatch ? apiWebServerBasePathMatch[1] : '';

    // Append the API_WEB_SERVER_BASE_PATH to the APP_CONTEXT_ROOT
    const normalizedAppContextRoot = appContextRoot.endsWith('/') ? appContextRoot : `${appContextRoot}/`;
    const absolutePath = useProtocol
        ? `${apiWebServerBasePath}${normalizedAppContextRoot}`
        : normalizedAppContextRoot;

    // Replace the <script> tags with absolute paths
    const scriptTags = $('script[src]');
    scriptTags.each((index, element) => {
        const scriptPath = $(element).attr('src');
        if (!isAbsoluteUrl(scriptPath)) {
            const absoluteScriptPath = `${absolutePath}${scriptPath}`;
            $(element).attr('src', absoluteScriptPath);
        }
    });

    // Replace the <link> tags with absolute paths
    const linkTags = $('link[href]');
    linkTags.each((index, element) => {
        const linkPath = $(element).attr('href');
        if (!isAbsoluteUrl(linkPath)) {
            const absoluteLinkPath = `${absolutePath}${linkPath}`;
            $(element).attr('href', absoluteLinkPath);
        }
    });

    //replace base href with context root
    const baseHref = `<base href="${normalizedAppContextRoot}" />`;
    $('base').replaceWith(baseHref);

    return $.html();
}

// Replace the index.html file
const distIndexPath = path.join(__dirname, 'dist', 'index.html');
const htmlContent = fs.readFileSync(distIndexPath, 'utf8');
const modifiedHtml = performReplacement(htmlContent);
fs.writeFileSync(distIndexPath, modifiedHtml);

//output to console
console.log(`Modified index.html file has been saved in the dist folder.`);
console.log(`Modified content is: `);
console.log(modifiedHtml);
Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.