angular - 如何将配置传递到 angular-cli 中的 indexTransform 中？

Question

我想在 Angular 8 (Angular-cli) 项目中使用 indexTransform 功能，但 targetOptions 的配置属性仍为空。

我在这里尝试了示例项目:https://github.com/just-jeb/angular-builders/tree/master/packages/custom-webpack/examples/full-cycle-app

但在示例项目中，配置也是空的。

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

在哪里可以定义应传递到回调函数中的配置？

Answer 1

配置反射(reflect)了在 ng build 中传递给 --configuration=configurationName 选项的值，因此在开发模式下始终为空。

如果您使用 --prod 标志(即 --configuration=product 的别名)进行构建，您可以看到配置已正确填充

下面您可以找到一个使用示例。此代码在 head 元素中添加一个带有 api 服务位置的元标记元素。

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)}`
}