Outlook Add-in text not binding

[aelhennawy]

Provide required information needed to triage your issue

First of all i'm sorry if this is not the right place to post this bug, please let me know where to post it.

I'm developing an Outlook Add-in using Angular v17. My issue is that text interpolation (e.g., {{ someVariable }}) sometimes does not render correctly. While it occasionally works fine, at other times, it fails to render, requiring multiple refreshes of the Add-in to display correctly.

I've searched extensively but haven't found a solution. Any assistance or suggestions would be greatly appreciated.

The app is bootstrapped after the Office is initialized, and i'm using Webpack.

Screenshot fro the Add-in UI

Bootstrapping

taskpane.html

Webpack config

const path = require("path");
const devCerts = require("office-addin-dev-certs");
const CopyWebpackPlugin = require("copy-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");

const urlDev = "https://localhost:3000/";

async function getHttpsOptions() {
  const httpsOptions = await devCerts.getHttpsServerOptions();
  return { ca: httpsOptions.ca, key: httpsOptions.key, cert: httpsOptions.cert };
}

module.exports = async (env, options) => {
  const dev = options.mode === "development";
  const config = {
    devtool: "source-map",
    entry: {
      polyfill: ["core-js/stable", "regenerator-runtime/runtime"],
      taskpane: ["./src/taskpane/taskpane.ts", "./src/taskpane/taskpane.html"],
      commands: "./src/commands/commands.ts",
    },
    output: {
      clean: true,
    },
    resolve: {
      extensions: [".ts", ".html", ".js", ".css"],
    },
    optimization: {
      runtimeChunk: 'single',
    },
    module: {
      rules: [
        {
          test: /\.ts$/,
          exclude: /node_modules/,
          use: {
            loader: "babel-loader",
            options: {
              presets: ["@babel/preset-typescript"],
            },
          },
        },
        {
          test: /\.tsx?$/,
          exclude: /node_modules/,
          use: "ts-loader",
        },
        {
          test: /\.html$/,
          exclude: /node_modules/,
          use: "html-loader",
        },
        {
          test: /\.(png|jpg|jpeg|gif|ico)$/,
          type: "asset/resource",
          generator: {
            filename: "assets/[name][ext][query]",
          },
        },
      ],
    },
    plugins: [
      new HtmlWebpackPlugin({
        filename: "taskpane.html",
        template: "./src/taskpane/taskpane.html",
        chunks: ["polyfill", "taskpane"],
      }),
      new HtmlWebpackPlugin({
        filename: "app.component.html",
        template: "./src/taskpane/app/app.component.html",
        chunks: ["polyfill", "app.component"],
      }),
      new HtmlWebpackPlugin({
        filename: "app.component.css",
        template: "./src/taskpane/app/app.component.css",
        chunks: ["polyfill", "app.component"],
      }),
      new HtmlWebpackPlugin({
        filename: "about.component.html",
        template: "./src/taskpane/app/components/about/about.component.html",
        chunks: ["polyfill", "about.component"],
      }),
      new CopyWebpackPlugin({
        patterns: [
          {
            from: "assets/*",
            to: "assets/[name][ext][query]",
          },
          {
            from: "manifest*.xml",
            to: "[name]" + "[ext]",
            transform(content) {
              if (dev) {
                return content;
              } else {
                return content.toString().replace(new RegExp(urlDev, "g"), urlProd);
              }
            },
          },
        ],
      }),
    ],
    devServer: {
      headers: {
        "Access-Control-Allow-Origin": "*",
      },
      server: {
        type: "https",
        options: env.WEBPACK_BUILD || options.https !== undefined ? options.https : await getHttpsOptions(),
      },
      port: process.env.npm_package_config_dev_server_port || 3000,
      watchFiles: path.join(__dirname, 'src'),
    },
  };

  return config;
};

Your Environment

• Platform [PC desktop, Mac, iOS, Office on the web]: Mac
• Host [Excel, Word, PowerPoint, etc.]: Outlook
• Office version number: 1.0.399
• Operating System: Mac os

Expected behavior

The variables should render correctly in the html

Current behavior

Variables not rendering

Thank you for taking the time to report an issue. Our triage team will respond to you in less than 72 hours. Normally, response time is <10 hours Monday through Friday. We do not triage on weekends.

[AlexJerabek]

Hi @aelhennawy, Thanks for reporting this. @exextoc, could you please investigate?

[kumarshrey-msft]

Hi @aelhennawy, you can refer to this documentation regarding how to develop Office Add-ins using Angular: https://learn.microsoft.com/en-us/office/dev/add-ins/develop/add-ins-with-angular2. Let me know if this resolves the issue for you.

[aelhennawy]

@kumarshrey-msft Thank you for the reply. I've re created the project and using only angular and removed the webpack, and it seems to be working fine now