How to pass configuration into indexTransform in angular-cli?

Question

I'd like to use the indexTransform functionality in an angular 8 (angular-cli) project, but the configuration property of targetOptions remains empty.

I've tried the example project here: https://github.com/just-jeb/angular-builders/tree/master/packages/custom-webpack/examples/full-cycle-app

But in the example project the configuration is empty, too.

module.exports = (targetOptions, indexHtml) => {
    targetOptions.configuration // configuration is empty
}

Where can I define the configuration that should be passed into the callback function?

Answer 1

configuration reflects value passed to --configuration=configurationName options in ng build, so in development mode is always empty.

if you build with --prod flag (that is an alias of --configuration=production) you can see configuration properly filled

Below you can find an usage example. This code adds in head element a meta tag element with api service location.

const allSettings = {
    development: {
        apiUrl: "http://localhost:8000"
    },
    production: {
        apiUrl: "https://myapiserver/"
    }
}

module.exports = (targetOptions, indexHtml) => {
    const i = indexHtml.indexOf('</head>');

    // if empty assumes 'development'
    const configuration = targetOptions.configuration || "development";

    // load settings (by configuration)    
    const settings = allSettings[configuration];

    // build meta tag
    let customHead = "";
    customHead += `<meta name="apiUrl" content="${setting.apiUrl}">`;

    // add customHead before head end tag
    return `${indexHtml.slice(0,i)}
            ${customHead}
            ${indexHtml.slice(i)}`
}